Embedding a Google Business Photos virtual tour

Not only do the virtual tours from Google Business Photos appear on search results and in Google Maps but they can also be used on your own website.

Here’s a guide showing how to do it. It assumes that you have access to editing the content on your own site but if you don’t it shows how easy it is for your webmaster to do and should only take them a matter of minutes.


The first step is to open the tour and choose the view where you would like it to start.



Embedding Google Business Photos image 1



Next click on the Link icon, located just to the left of the compass (highlighted pink in this image).



Embedding Google Business Photos image 2

Highlight and copy all of the HTML text contained in the box below “Paste HTML to embed in website”.
(Please ensure that you have selected all the HTML text as there is more than is visible)



Embedding Google Business Photos image 3

Paste the HTML text that you copied onto the page where you want the tour to appear on your site.



Embedding Google Business Photos image 4

This will now show the tour on that page



Embedding Google Business Photos image 6

In order to resize the tour to fit you have a couple of options. The first is to change the width and height by editing the text that you copied to your site. Highlighted in pink, I have changed the width from 425 to 980 and the height from 350 to 660 (these can be any size to fit on your page).



Embedding Google Business Photos image 7

The page now looks like this.



Embedding Google Business Photos image 8


You can also change the width and height by selecting the “Customise and preview embedded map” option in the window where you copied the text from. Select Custom option and alter the size to whatever you require and copy and paste the HTML text provided onto your site.


Embedding Google Business Photos image 9

This will now work on all platforms except the iPad. In order to get the tour to show on there you will need to change a bit of the code that you copied from Google.

Just replace the part of the code that reads

“https://maps.google.co.uk/maps?”

with

“http://maps.gstatic.com/m/streetview/?”


I hope this helps and shows how easy it is to do.

Jonathan