How to Embed a Google 360 Tour

Once you have your tour published to Google, the tour will show on your Google My Business listing in Maps, and can be accessed via Google Search as well. But to get the full value out of your tour, add the tour to your website.

Standard Google Embed

There are 2 ways to add the tour to your website. The first is the standard embed directly from Google Maps. This provides a static image of the first pano of the tour, and your visitors can click around inside the tour, display it full screen, or go to your Google Maps listing. 

While you can view the Google tour from Google Search, to get the embed code you need to go to Google Maps and locate your Google listing to capture the html embed code for your website. Here are the steps and a short video showing you how to accomplish this.

1. Go to Google Maps
2. Search for your Google Maps Business Listing
3. Click on the first photo you see to go to the photos carousel
4. Scroll down the list of photos on the left until you find the 360’s, aka panos. The panos are the ones with the circle/arrow on the lower left of the image.
5. Pick which pano you would like to start your embedded tour with
6.  Once the pano opens, adjust it to the point you want the tour to start.
7. Make sure your verticals are perfectly straight. Looking up or down can cause more distortion, so make sure your walls are straight with the sides of the screen.
8. Click on the 3 vertical dots by your business listing name in box the upper left of the pano. If you accessed your business listing from Google Search, you will not see the 3 dots. You need to start from Google Maps.
9. Then click on Share or embed, and a new screen pops up.
10. Click on Embed a map
11. Click on the dropdown where it says Medium to adjust the embed window size and copy your code. You can select Small,  Medium,  Large, or Custom.
12. For the Custom size, you can open a second preview window.
13. Please note moving around in the Preview window does not update the code. So if you want to make an adjustment on the the view of the embedded tour, you need to make that change in the main screen first, then go back to Step 8.
14. Once you are satisfied with the size and orientation of your first pano, then click COPY HTML.
15. Paste this coding into a text file such as from Notepad for Windows or TextEdit for Mac, or other text editor for safe keeping.
16. Add this html coding to a page or post on your website. Or send the code to your Webmaster to update your website for you.

AutoRotation Embed Code

The second type of embed is with some custom javascript and a Maps API key which provide automatic rotation of the first pano.  I provide this coding as part of my Premier or higher packages, or as an add-on to the lower level packages. Here is an example of this custom coding.