Boost Engagement: Learn How to Embed Google Street View Virtual Tours on Your Social Media

How to Embed Google Street View Virtual Tours on Your Website or Social Media Platform?

Google Street View is a service that provides panoramic views of streets, landmarks, and places around the world. You can explore these views on Google Maps, or you can create your own 360-degree photo spheres using a camera or a smartphone app. These photo spheres can be uploaded to Google Maps and shared with others, or you can embed them on your website or social media platform to showcase your location, business, or event.

Embedding Google Street View virtual tours on your website or social media platform can have many benefits, such as:

• Enhancing your online presence by providing a more immersive and interactive experience for your visitors.
• Increasing your visibility by making your location more searchable and discoverable on Google Maps and other platforms.
• Boosting your engagement by encouraging your visitors to explore your location, learn more about your products or services, and share their feedback.
• Building trust and credibility by showing your location in a realistic and authentic way, and allowing your visitors to see what you have to offer.

In this article, we will show you how to embed Google Street View virtual tours on your website or social media platform in four simple steps:

Step 1: Find or Create Your Google Street View Virtual Tour

The first step is to find or create the Google Street View virtual tour that you want to embed on your website or social media platform. There are two ways to do this:

• Use an existing virtual tour from Google Maps. You can search for any location on Google Maps and look for the 360-degree photo spheres that are available. These photo spheres can be from Google or from other contributors, such as businesses, organizations, or individuals. You can also browse the Street View special collections that feature iconic places, such as the Eiffel Tower, Machu Picchu, or the Grand Canyon.
• Create your own virtual tour using a camera or a smartphone app. You can use a 360-degree camera, such as the Ricoh Theta, the Insta360 One X, or the GoPro Fusion, to capture high-quality photo spheres of your location. Alternatively, you can use a smartphone app, such as the Google Street View app or the Cardboard Camera app, to take photo spheres with your phone’s camera. You can then upload your photo spheres to Google Maps using the same app or the Google Street View website.

Once you have found or created your Google Street View virtual tour, you can proceed to the next step.

Step 2: Generate the Embed Code for Your Virtual Tour

The next step is to generate the embed code for your Google Street View virtual tour. The embed code is a snippet of HTML code that you can copy and paste on your website or social media platform to display your virtual tour. There are three ways to generate the embed code for your virtual tour:

• Use the Maps Embed API. The Maps Embed API is a service that lets you display Street View images on your site or blog as interactive photo spheres. You can use this option if you want more control over the appearance and behavior of your virtual tour, such as changing the size, zoom level, heading, pitch, and field of view. To use this option, you need to have a Google Cloud project with a billing account and an API key. You can then follow the instructions on how to use the Maps Embed API.
• Use the Share or Embed Image option on Google Maps. This option is simpler and easier than using the Maps Embed API, but it has fewer customization options. You can use this option if you are satisfied with the default settings of your virtual tour. To use this option, you need to go to Google Maps and locate your virtual tour. Then, click on one of the 360-degree photo spheres to enter the tour mode. Next, navigate to the view that you want to embed in the tour. Finally, click on the three dots icon at the top left corner of the screen and select Share or Embed Image. A pop-up window will appear with two tabs: Share Link and Embed Image. Choose the Embed Image tab and copy the HTML code that is generated for you.
• Use the Street View Image API. The Street View Image API is a service that lets you embed a static (non-interactive) thumbnail of a photo sphere into your webpage without using JavaScript.

Step 3: Paste the Embed Code on Your Website or Social Media Platform

The third step is to paste the embed code that you have generated for your Google Street View virtual tour on your website or social media platform. The process of pasting the embed code may vary depending on the platform that you are using, but the general steps are as follows:

• Go to your website or social media platform and log in to your account. You need to have access to the editor or the source code of your webpage or post where you want to embed your virtual tour.
• Find the location where you want to insert your virtual tour. You can choose any place on your webpage or post that supports HTML code, such as a text box, a widget, a sidebar, a footer, or a custom HTML block.
• Switch to the HTML mode or view. You need to switch from the visual mode or view to the HTML mode or view to be able to paste the embed code. This option may be labeled as HTML, Source, Code, or < > depending on the platform that you are using.
• Paste the embed code that you have copied from Google Maps or the Maps Embed API. You can use the keyboard shortcut Ctrl+V (Windows) or Command+V (Mac) to paste the code, or right-click and select Paste from the menu. Make sure that you paste the code exactly as it is, without changing or deleting anything.
• Save or publish your changes. You need to save or publish your changes to make your virtual tour visible on your website or social media platform. You can preview your webpage or post before publishing it to see how your virtual tour looks and works.

Step 4: Customize the Appearance and Behavior of Your Virtual Tour

The final step is to customize the appearance and behavior of your Google Street View virtual tour according to your preferences and needs. You can do this by modifying some parameters in the embed code that you have pasted on your website or social media platform. Here are some of the parameters that you can change:

• Width and Height. These parameters determine the size of your virtual tour in pixels. You can change them by editing the values in the width and height attributes of the iframe tag in your embed code. For example, width=“600” height=“400” means that your virtual tour will have a width of 600 pixels and a height of 400 pixels. You can use any values that suit your webpage or post layout, but make sure that they are proportional to avoid distortion.
• Zoom. This parameter determines how much of your virtual tour is visible at once. You can change it by editing the value in the zoom parameter in the src attribute of the iframe tag in your embed code. For example, zoom=1 means that your virtual tour will have a zoom level of 1, which is the default value. You can use any value between 0 and 21, where higher values mean more zoomed-in views and lower values mean more zoomed-out views.
• Heading. This parameter determines the direction that your virtual tour is facing. You can change it by editing the value in the heading parameter in the src attribute of the iframe tag in your embed code. For example, heading=90 means that your virtual tour will face east, which is 90 degrees clockwise from north. You can use any value between 0 and 360, where 0 means north, 90 means east, 180 means south, and 270 means west.
• Pitch. This parameter determines the angle that your virtual tour is tilted. You can change it by editing the value in the pitch parameter in the src attribute of the iframe tag in your embed code. For example, pitch=10 means that your virtual tour will be tilted up by 10 degrees from horizontal. You can use any value between -90 and 90, where -90 means straight down, 0 means horizontal, and 90 means straight up.
• FOV. This parameter determines the field of view of your virtual tour, which is how much of the scene is visible at once. You can change it by editing the value in the fov parameter in the src attribute of the iframe tag in your embed code. For example, fov=120 means that your virtual tour will have a field of view of 120 degrees, which is a very wide angle. You can use any value between 10 and 120, where lower values mean narrower views and higher values mean wider views.