adding a 360º tour to your website - serenitiphotography

So you've had your Google Maps Business View virtual tour completed and it looks fantastic on your Google+ page! Now, you'd really like visitors to your own website to see it too. Embedding a Google Virtual Tour is simple, just follow these steps, or pass a link to this page on to the person who looks after your website and they'll be able to integrate your virtual tour into your website with ease!!  Alternatively if you would like me to help you set this up drop me a line.


You are able to compete this task whether you are viewing in the new Google Maps or the classic version, just follow the instructions below

New Google Maps

Step 1

Enter your virtual tour by opening up your businesses Google+ page and clicking on "see inside" or type into Google's search bar your business name and clicking on your Google page name.  Click on the "see inside" on the right hand side


Step 2

Once you have entered the tour minimise the tour by pressing the "-" button under the compass point on the bottom right hand side.  (This will allow your viewers to see as much as the business when they click through the tour).  


Navigate your tour and find a suitable view to start your tour and make sure that's what you see on screen before the next step. you can choose any point you like! this is great if you want to show of different areas of your business on different web pages.

Step 3

Click on the three dots on the right hand side of your business name in the top left hand corner and in the menu choose "share and embed" to bring up the menu.


Click onto "embed" tab to bring up the menu opposite and then choose the size of the box you want to give to the 360º virtual tour on your website.  you can either use the default sizes or you can customise your own.


small is set at 400 pixels wide and 300 pixels high

medium is set at 600 pixels wide and 450 pixels high

large is set at 800 pixels wide and 400 pixels high


You can also set the size of the frame border by altering from "0" to however many pixels you require it wide

Step 4

Copy and paste the embedding code into the html of the page on your website where you'd like your virtual tour to show, then simply save or upload this page to your website.



Classic Google Maps

If you have switched to new Google Maps you can revert back to classic maps in order to get the embedding codes to add the tour to your website. in new Google Maps simply click on the question mark toward the bottom right of the screen and select 'Return to Classic Google Maps'. You will be able to revert back to new Google Maps at any time you wish.


Step 1

Head to you any Google page where your virtual tour shows and click on it so it fills the screen and looks like the image to the right.


Navigate your tour and find a suitable view to start your tour and make sure that's what you see on screen before the next step.


You can choose any point you like!


This is great if you want to show of different areas of your business on different web pages.


Step 2

Click on the small 'link' icon just to the top left side of your tour.


Step 3(a)

Copy the 'iframe embedding' code from the box show below, unless you need your tour to be exact size, in which case see step 3(b)


Step 3(b)

If you need your tour to be a specific size to fit a certain area of your website, fear not!


Just hit the link underneath the code that says 'Customise and preview embedded map'.


You'll now see some boxes where you can enter the exact dimensions you need.


This will generate a new embedding code to fit perfectly inside your sites design.


Just copy the code shown on the preview page and then head to step 4.


Step 4

Paste the embedding code into the html of the page on your website where you'd like your virtual tour to show.


Then simply save or upload this page to your website.


Step 5

Go to your website and check the page that your virtual tour has been added to and make sure everything is as you like it.


If you're happy, pat yourself on the back and then email all your friends and tell them to check out your tour!


Finally, go and put your feet up and let your Virtual Tour show your online visitors exactly why they need to come and see you!