Advertisement
  1. Photo & Video
  2. Maps
Photography

How to Embed Google Photo Spheres on Your Blog or Website

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Immersive Photo Mapping.
Create a Photo Sphere With Your DSLR Camera

Viewing a photo sphere feels almost like standing in the place the image was taken, but, as a new form of digital image, sharing photo spheres is still a little bit cumbersome.

In this tutorial I will show you how to embed Google photo spheres onto a webpage. If this is your first time inserting code into a webpage, don’t worry. All the hard work has been done for us: we just need to gather three elements and put them together. You will need a text editor program open during this process to paste and edit text or code snippets as you gather them.

Find or Create a Photo Sphere

You can search through Google Street View and find any photo sphere from around the world and embed it into your blog. Or you can create a photo sphere using your smartphone or DSLR and contribute it to Google Maps. See my tutorials on creating a photo spheres with a smartphone or a DSLR.

Find the Panorama ID Number

Find the photo sphere or panorama on Google Maps and click in to view it. Copy and paste the URL to your text editor. You will notice that the URL is very long and broken up into different segments that correspond to different bits of data. Somewhere in this long URL is the Pano ID. Look through the URL until you come across the expression data=. This  is a clue of where to start looking. The Pano ID is located after this expression and between the characters !1s and the the next ! exclamation point. For example, in the string data=!3m6!1e1!3m4!1sWijofm0bDHKz2mc4rSk-dg!2e0!7i13312!8i6656, the characters Wijofm0bDHKz2mc4rSk-dg are the Pano ID. Copy these characters to your text editor to use as the Pano ID.

Crown Point Vista Viewpoint photosphere

You can also extract the Pano ID using javascript. Luckily, some people have already created a simple online tool for us to use to grab the Pano ID. The Panoid tool let's you to drag the pegman to any spot on Google Maps and returns the Pano ID in the bottom left corner. Copy the Pano ID and paste it into your text editor.

The Panoid tool

Get the Embed code

Go to Google Maps Embed API and click on the Show Street View or a custom panorama tab.

Google Maps Embed API

Place the Pano ID in the Custom panorama ID box. Once you click out of that box, your photo sphere will appear in the preview. If it does not appear, double check the Pano ID.

Photo sphere must be approved by and added to Google Maps to have a usable Pano ID.

When the photo sphere previews properly, copy the the embed code at the bottom of the page and paste it into your text editor.

Get an API Key

Staying in the Google Maps API, click on the Looks Good button. Then click on the Register button on the next page.  Register for an API by registering, reviewing, and agreeing to the terms and conditions. Once you agree to the terms, a new project will be created for you and an API key will be generated. You will also be taken to the developer’s console.

In the developer’s console, click on your browser key. You will be taken to the Browser API Key Page. On this page, copy the API key and paste it into your text editor.

Get your Google Maps Embed API key

There is one more field to fill in before you can use your key. You have to set up referrers in the last field. Your referrer will be your website with a wildcard character (*) before it and after it. For example: *.yoursite.com/* This will tell the API that any page on www.yoursite.com is allowed to use the API. It also restricts other sites from using your API key unless they are added here.

Add your API key to the Embed code by replacing the in the key=... of your Embed code with your API key.

Use Code Snippet to Embed

If you’re using a content manager like Wordpress,  create a new page or blog post. Then, click on the switch to HTML button. Once in this mode, you can insert custom HTML code. Paste in the embed code and click on the save button. You can switch back to the regular mode later to add any text or other elements that you want.

Go ahead and view your page. If your photo sphere appears, great job you have done it! If it does not appear, you should see a warning message. The warning message will tell you if you have a problem with the Pano ID or with the API key. If no photo sphere or warning appears, the problem may be in the code snippet. Copy it again and paste it into your web page.

If you’re using Adobe Muse, click on the Object menu and select Insert HTML. Then paste your code snippet into the dialog box and click OK. Drag the box to the desired location on your page and resize it to 600 by 450 pixels. To view the photo sphere, you will have to publish the site to the web. So go ahead and click on Publish. Once published, navigate to the page with the photo sphere to view it.

Here's a look at my embed code that I pasted into my page:

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/streetview?pano=2k2pvtUuhek5-r110sW2Lg&key=AIzaSyB7cbSbriZYV2eW..." allowfullscreen>

A Simplified Alternative

A simple way to embed a photo sphere is to embed a Google + post on your site. Post your photo sphere to Google+. It will be displayed as a photo sphere and allow anyone who clicks on the image to have the immersive photo sphere experience.

Hover over the post and click on the menu arrow. From the menu select Embed Post. A screen will pop up with the embed code. Just copy and paste in into one of your website’s pages. That’s it. Your post containing your photosphere will now display on your web page.

Embed your photo sphere using Googles Embed Post feature

With these simple steps, you can embed immersive photo spheres on any webpage or blog by using Google Maps Embed API. Photo spheres provide a unique photo experience for your viewers and help bring the world to your webpage.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.