Embedding Tours

What do you need to do to embed your Street View | Trusted shoot?

1-google-maps-page.jpg-nggid019-ngg0dyn-520x0x100-00f0w010c010r110f110r010t010
Doing a basic embedding of a Street View | Trusted virtual tour is a relatively simple task for anyone able to copy and paste a block of HTML into their web pages.

First of all find your published tour through Google Maps or Google Local and navigate to the panorama you’d like to use. Turn around until you’re pointing in the best direction as this also gets recorded when embedding. Next click the links icon as highlighted with a red box in this first screen shot.

2-click-link-icon.jpg-nggid0210-ngg0dyn-320x240x100-00f0w010c010r110f110r010t010
A box will appear that allows you to copy a link you can email others or send via instant messaging. If you’d like to type the link into a text message yourself or just want it shorter for emails click the “Short URL” box to have a http://Gool.gl/maps/ link created.
For embedding we don’t want the already highlighted link but instead the HTML below it. Rather than copy it direct click the “Customise and preview embedded map“ link.

3-customise-and-preview.jpg-nggid0211-ngg0dyn-320x240x100-00f0w010c010r110f110r010t010
The window that pops up will let you pick from a number of predefined sizes:
Small – 425 wide by 240 tall
Medium – 562 wide by 314 tall
Large – 700 wide by 394 tall

If none of these fit the space you have to work within click the Custom button and enter your own width and height. If you want it small you can go down to 225 by 180, but the map controls will occupy a lot of the space and your visitors won’t get the full benefit of the tour. If everything goes black you’ve gone too small, step up the size until the view reappears.

With the size right copy the text in the box at the bottom of the window. It should look something like the HTML here.


<iframe width="600" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?q=Aroma+Hair+%26+Beauty&amp;layer=c&amp;sll=51.359622,0.071966&amp;cid=12520809171123491109&amp;panoid=uBk5MtwE1l7jkeyqKYVLOQ&amp;cbp=13,40.11,,0,0&amp;hl=en&amp;gl=GB&amp;ie=UTF8&amp;hq=Aroma+Hair+%26+Beauty&amp;hnear=&amp;t=h&amp;cbll=51.359624,0.07208&amp;source=embed&amp;ll=51.358678,0.072076&amp;spn=0.00335,0.012875&amp;z=16&amp;output=svembed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?q=Aroma+Hair+%26+Beauty&amp;layer=c&amp;sll=51.359622,0.071966&amp;cid=12520809171123491109&amp;panoid=uBk5MtwE1l7jkeyqKYVLOQ&amp;cbp=13,40.11,,0,0&amp;hl=en&amp;gl=GB&amp;ie=UTF8&amp;hq=Aroma+Hair+%26+Beauty&amp;hnear=&amp;t=h&amp;cbll=51.359624,0.07208&amp;source=embed&amp;ll=51.358678,0.072076&amp;spn=0.00335,0.012875&amp;z=16" style="color:#0000FF;text-align:left">View Larger Map</a></small>


Load your web site in another web browser page or tab and find the point at which you’d like the tour. In your page editor paste the HTML from Google into the page at this point, making sure it sits between HTML tags (“<text>” parts) and not inside a tag. Eg. </p><Googles code..><p> and not <p <Googles code..>>.

Save the page in the editor and reload the page in the other window to check that the panorama loads in the correct place.

View Larger Map

check out WalkInto

If you’d like to layer on

menus and hotspots

077 6997 3757

Call us now on