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.
- PanoramaCreate a Photo Sphere With Your DSLR CameraJeffrey Opp
- PanoramaGettin' Round: How to Make a Spherical Image with Google CameraJeffrey Opp
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.
Get the Embed code
Go to Google Maps Embed API and click on the Show Street View or a custom panorama tab.
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.
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.
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.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post