Custom Street View panorama tiles

View this example full screen.

JavaScript

var panorama;

// The panorama that will be used as the entry point to the custom
// panorama set.
var entryPanoId = null;

function initialize() {
  // The latlng of the entry point to the Google office on the road.
  var sydneyOffice = new google.maps.LatLng(-33.867386, 151.195767);

  // Set up the map and enable the Street View control.
  var mapOptions = {
    center: sydneyOffice,
    zoom: 16
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  panorama = map.getStreetView();
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function.
  var panoOptions = {
    position: sydneyOffice,
    visible: true,
    panoProvider: getCustomPanorama
  };
  panorama.setOptions(panoOptions);

  // Create a StreetViewService object.
  var streetviewService = new google.maps.StreetViewService();

  // Compute the nearest panorama to the Google Sydney office
  // using the service and store that pano ID.
  var radius = 50;
  streetviewService.getPanoramaByLocation(sydneyOffice, radius,
      function(result, status) {
    if (status == google.maps.StreetViewStatus.OK) {
      // We'll monitor the links_changed event to check if the current
      // pano is either a custom pano or our entry pano.
      google.maps.event.addListener(panorama, 'links_changed',
        function() {
          createCustomLinks(result.location.pano);
        });
    }
  });
}

function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  // Return a pano image given the panoID.
  return 'images/panoReception1024-' + zoom + '-' + tileX + '-' + tileY +
      '.jpg';
}

function getCustomPanorama(pano) {
  switch (pano) {
    case 'reception':
      return {
        location: {
          pano: 'reception',
          description: 'Google Sydney - Reception',
          latLng: new google.maps.LatLng(-33.86684, 151.19583)
        },
        links: [],
        // The text for the copyright control.
        copyright: 'Imagery (c) 2010 Google',
        // The definition of the tiles for this panorama.
        tiles: {
          tileSize: new google.maps.Size(1024, 512),
          worldSize: new google.maps.Size(2048, 1024),
          // The heading at the origin of the panorama tile set.
          centerHeading: 105,
          getTileUrl: getCustomPanoramaTileUrl
        }
      };
      break;
    default:
      return null;
  }
}

function createCustomLinks(entryPanoId) {
  var links = panorama.getLinks();
  var panoId = panorama.getPano();

  switch (panoId) {
    case entryPanoId:
      // Adding a link in the view from the entrance of the building to
      // reception.
      links.push({
        heading: 25,
        description: 'Google Sydney',
        pano: 'reception'
      });
      break;
    case 'reception':
      // Adding a link in the view from the entrance of the office
      // with an arrow pointing at 100 degrees, with a text of 'Exit'
      // and loading the street entrance of the building pano on click.
      links.push({
        heading: 195,
        description: 'Exit',
        pano: entryPanoId
      });
      break;
    default:
      return;
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

JavaScript + HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Street View panorama tiles</title>
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var panorama;

// The panorama that will be used as the entry point to the custom
// panorama set.
var entryPanoId = null;

function initialize() {
  // The latlng of the entry point to the Google office on the road.
  var sydneyOffice = new google.maps.LatLng(-33.867386, 151.195767);

  // Set up the map and enable the Street View control.
  var mapOptions = {
    center: sydneyOffice,
    zoom: 16
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  panorama = map.getStreetView();
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function.
  var panoOptions = {
    position: sydneyOffice,
    visible: true,
    panoProvider: getCustomPanorama
  };
  panorama.setOptions(panoOptions);

  // Create a StreetViewService object.
  var streetviewService = new google.maps.StreetViewService();

  // Compute the nearest panorama to the Google Sydney office
  // using the service and store that pano ID.
  var radius = 50;
  streetviewService.getPanoramaByLocation(sydneyOffice, radius,
      function(result, status) {
    if (status == google.maps.StreetViewStatus.OK) {
      // We'll monitor the links_changed event to check if the current
      // pano is either a custom pano or our entry pano.
      google.maps.event.addListener(panorama, 'links_changed',
        function() {
          createCustomLinks(result.location.pano);
        });
    }
  });
}

function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  // Return a pano image given the panoID.
  return 'images/panoReception1024-' + zoom + '-' + tileX + '-' + tileY +
      '.jpg';
}

function getCustomPanorama(pano) {
  switch (pano) {
    case 'reception':
      return {
        location: {
          pano: 'reception',
          description: 'Google Sydney - Reception',
          latLng: new google.maps.LatLng(-33.86684, 151.19583)
        },
        links: [],
        // The text for the copyright control.
        copyright: 'Imagery (c) 2010 Google',
        // The definition of the tiles for this panorama.
        tiles: {
          tileSize: new google.maps.Size(1024, 512),
          worldSize: new google.maps.Size(2048, 1024),
          // The heading at the origin of the panorama tile set.
          centerHeading: 105,
          getTileUrl: getCustomPanoramaTileUrl
        }
      };
      break;
    default:
      return null;
  }
}

function createCustomLinks(entryPanoId) {
  var links = panorama.getLinks();
  var panoId = panorama.getPano();

  switch (panoId) {
    case entryPanoId:
      // Adding a link in the view from the entrance of the building to
      // reception.
      links.push({
        heading: 25,
        description: 'Google Sydney',
        pano: 'reception'
      });
      break;
    case 'reception':
      // Adding a link in the view from the entrance of the office
      // with an arrow pointing at 100 degrees, with a text of 'Exit'
      // and loading the street entrance of the building pano on click.
      links.push({
        heading: 195,
        description: 'Exit',
        pano: entryPanoId
      });
      break;
    default:
      return;
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.

Last updated March 4, 2015.