Photo Sphere

Embed Photo Spheres on Your Website

Photo Sphere Logo

This page shows how to easily embed photo spheres on any website with an interactive, 360-degree panorama viewer just like you see in Street View on Google Maps.

Uploading your photo spheres to Views

Embedding photo spheres on your website is really easy once you’ve contributed them to Google Maps and our Views community. Please see our help center page to learn how to do this for photo spheres you have on Google+ or your Android device.

Getting the embed code from Views

Once your photo spheres are public on Views, go to your profile page and find the image you want to embed. As shown in the screenshot below, simply click the Share button and then copy the IFRAME code. You can customize the size as well.

Embedding Photo Spheres through Views

Now, simply paste this IFRAME code into the HTML for your website wherever you want it to appear on the page:

Using the Google Maps API

Within the Google Maps API, the StreetViewPanorama class allows you to programmatically retrieve and display Street View panoramas and photo spheres.

  1. Make sure you’ve added photo spheres to Views as previously described.
  2. Copy the IFRAME embed code as previously described.
  3. Look for the “panoid” value within the URL (ex. QKZJDF5QWO0AAAAAAAABOw)
  4. Use this panoid value to set the “setPano(pano:string)” method or directly set the “pano” property in the StreetViewPanoramaOptions object.

Example

function initialize() {
  var myPanoid = "QKZJDF5QWO0AAAAAAAABOw";
  var panoramaOptions = {
    pano: myPanoid,
    pov: {
      heading: 45,
      pitch:-2
    },
    zoom: 1
  };
  var myPhotoSphere = new google.maps.StreetViewPanorama(
      document.getElementById('map-canvas'),
      panoramaOptions);
  myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);

If you’d like to show a gallery of photo spheres, simply repeat the steps above to get panoid values for the photo spheres you care about.

Using the Google Street View Image API

The Google Street View Image API lets you embed a static (non-interactive) thumbnail of a photo sphere into your webpage without the use of JavaScript. This is helpful for creating galleries of multiple photo spheres.

Here is an example of a static image URL for a photo sphere:

http://maps.googleapis.com/maps/api/streetview?size=600x400&fov=90&heading=350&pitch=-2&pano=QKZJDF5QWO0AAAAAAAABOw&sensor=false

Using the Google+ Platform Widget API

This method for embedding photo spheres is no longer supported. If you are using this functionality, please update your code by December 6, 2013.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.