How to embed Street View virtual tours on your website

  • embed-street-view-on-your-website

Google’s Business Street View is a fun and interactive experience for a customer once they stumble upon it. They will spend some time clicking the arrows and doing 360 spins while they make the decision to visit in-person. But what if they didn’t notice your tour before they clicked onto your website? Or are using one of those other search engines? How will they find it?

One of the benefits of purchasing a Business Street View Tour is that Google allows you to embed it onto your website. Very similar to that of a YouTube video. I’m going to take you through the step by step process that either you (the business owner) or your web team can easily do in a couple minutes.

Google Maps – Old vs. New

Update: Please be aware that the embed code is only available on the new Google maps. Take a look at the screenshots and compare to what you see on Google maps. You can no longer get the embed code from Photos on the knowledge graph.

Embed Your Business View Tour

 Step 1. Find your Virtual Tour

Once your tour is live you will need to go to the Google maps and search for your business.

Step 2. Look Inside your business

Click on to the “Look Inside” graphic and the right hand side of the screen will load your virtual tour.

Step 3. Link Options

Find the Maps link icon sitting right next to the printer icon at the top of the left hand column of Classic Google maps. Click it to reveal the share links interface.

Step 4. Get your Share links and Embed code

After you click the link icon a bubble window pops out and displays your linking options.

The first option allows you to create a direct hyper link that will send people to Google Maps with your tour already loaded on the screen. Depending on the preference on their computer, it will go to either New maps or Old Maps automatically. The direct link can also be shortened using the Short URL option.

The second option is to embed the virtual tour using an iframe code at the preset dimensions of 425 by 350. Copy and past this code any where on your website or places around the web that will allow you to embed a YouTube video.

The third option is the blue link at the bottom “Customize and preview embedded map”. This will allow you to change the size of your virtual tour and grab the code of your new size.

Update: New Maps Embed Code

In the Fall of 2014 Google updated the user interface for the new Maps to show the “Share or Embed Image” option. Quite frankly it works better than the original method. Let’s go through it really quick.

1. Find your Business View tour on the Google Maps from a desktop or laptop.

2. Use the Business View interface to navigate your camera angle to the spot on your tour that you would like to start the tour.

3. Once you’re ready, click the gear in the lower right corner of the interface as depicted in the image below. Click onto the first option, “Share or embed image”

4. A pop-up box will appear in the middle of your screen displaying two options. Share Link and Embed image. Click on Embed image option (green arrow). This popup will change to allow you to choose from some pre-selected sizes small, medium, large or you can choose a custom size (blue arrow). We have found a decent size to be 600 x 300 but you should experiment with what is best for your website.

5. Once those options are selected you will have to copy the code that is automatically generated for you (red arrow).

6. Paste the code into your page on your website. Note: If you are using WordPress paste the code while in text mode. You may need to ask your webmaster for help or find a WordPress tutorial on YouTube.

Embedding Tips and Tricks

1. Before generating and coping  an embed code, position your tours angle and zoom the way you want it to show up after you embed it onto your website.

Real World Use: This was useful for a hotel when they wanted to start the tour at a particular size room. It makes navigating the tour a bit more friendly. When customers landed on the website page for a large room with 2 Queen beds they automatically saw the tour for that room because the embed code was taken for that particular position on the tour.

2. Share your Business View tour any where that will allow HTML code such as G+, Facebook, Forums, Newsletters, Online Directories, etc..

2018-08-27T13:24:35+00:00Categories: Marketing, Tutorials|