Guide

How to Embed a Virtual Tour on Your Website?

A complete step-by-step guide on how to embed a Google Street View tour on your website.

Watch the video tutorial to see the process in action.

AMethod: Directly from Google Maps

Step 1: Find your location

Go to Google Maps and search for your business or location. Click on the profile photo or Street View thumbnail to enter the 360° panorama mode.

Step 2: Set the perfect view

Rotate and move the view until you find the exact frame you want to show on your website. What you see on the screen is exactly what users will see when they visit your site.

Step 3: Get the embed code

1. Click the three dots icon (menu) in the top left corner (or the "Share" button).
2. Select the "Share or embed map" option.
3. Switch to the "Embed a map" tab.
4. Choose a size (e.g., "Medium") or leave it as default.
5. Click the "COPY HTML" button.

Tip: The copied code starts with the <iframe... tag.

BResponsive Code (Recommended)

The standard code from Google Maps has a fixed width. To make the tour look good on phones and computers (adapting to screen width), use the ready-made code below.

HTML Snippet

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
  <iframe 
    src="LINK_TO_YOUR_MAP" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" 
    allowfullscreen="" 
    loading="lazy" 
    referrerpolicy="no-referrer-when-downgrade">
  </iframe>
</div>

Where to paste this?

In WordPress editor: Use the "Custom HTML" block.
In Wix/Squarespace: Add an "Embed Code" or "HTML" element.
In raw code: Paste it in the section where you want the tour to appear.

⚠️ Important: In the code above, replace the text LINK_TO_YOUR_MAP with the link found inside the quotes src="..." in the code copied from Google Maps (Step 3).

Need help?

If you have trouble embedding the tour or need a new photo session, contact me.