Google Street View in Elementor: complete guide ​
Elementor is the most popular WordPress page builder. WP Google Street View integrates seamlessly through shortcodes. Here is how to add Street View and Google Maps to any Elementor page.
Method 1: Shortcode widget ​
- In Elementor, drag a Shortcode widget to your page
- Paste the WP Google Street View shortcode:
[wpgsv id="42"] - The map renders in the live preview
This method works with any map configured in the WP Google Street View admin. All settings (type, style, markers, layers) are applied.
Method 2: Inline shortcode with coordinates ​
For quick embeds without creating a WPGSV post:
- Drag a Shortcode widget
- Paste:
[wpgsv_map lat="48.8584" lng="2.2945" type="street"] - The Street View panorama renders immediately
Method 3: HTML widget ​
If you need more control over the surrounding markup:
- Drag an HTML widget
- Enter the shortcode wrapped in a div for custom styling:
<div style="border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
[wpgsv id="42"]
</div>Responsive considerations ​
WP Google Street View maps are responsive by default when the width is set to 100%. In Elementor, the Shortcode widget inherits the column width, so maps automatically adapt to the layout.
For custom heights on different devices, use Elementor's responsive controls on the section or column, and set the WPGSV map height accordingly.
Combining with Elementor features ​
- Tabs widget — Place different maps in different tabs (e.g., "Street View" and "Map" tabs)
- Toggle/Accordion — Show maps inside expandable sections to save page space
- Popup — Trigger a map popup on button click using Elementor Pro's popup builder
- Loop Grid — For listing sites, use dynamic shortcodes in Elementor's Loop Grid to show maps per listing
Performance tip ​
If you have multiple maps on an Elementor page, consider using Elementor's built-in lazy loading for sections. This prevents all maps from loading simultaneously and improves initial page load time.