New pricing changes went into effect on July 16, 2018. For more information, check out the Guide for Existing Users.

Custom Street View Panorama Tiles

Read the documentation or view this example fullscreen.

var panorama;

// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
var outsideGoogle;

// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData() {
  return {
    location: {
      pano: 'reception',  // The ID for this custom panorama.
      description: 'Google Sydney - Reception',
      latLng: new google.maps.LatLng(-33.86684, 151.19583)
    },
    links: [{
      heading: 195,
      description: 'Exit',
      pano: outsideGoogle.location.pano
    }],
    copyright: 'Imagery (c) 2010 Google',
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function(pano, zoom, tileX, tileY) {
        return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/' +
            'panoReception1024-' + zoom + '-' + tileX + '-' + tileY + '.jpg';
      }
    }
  };
}

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
      document.getElementById('street-view'),
      {pano: outsideGoogle.location.pano});
  // Register a provider for the custom panorama.
  panorama.registerPanoProvider(function(pano) {
    if (pano === 'reception') {
      return getReceptionPanoramaData();
    }
    return null;
  });

  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener('links_changed', function() {
    if (panorama.getPano() === outsideGoogle.location.pano) {
      panorama.getLinks().push({
        description: 'Google Sydney',
        heading: 25,
        pano: 'reception'
      });
    }
  });
}

function initialize() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  var streetviewService = new google.maps.StreetViewService;
  streetviewService.getPanorama(
      {location: {lat: -33.867386, lng: 151.195767}},
      function(result, status) {
        if (status === 'OK') {
          outsideGoogle = result;
          initPanorama();
        }
      });
}
<div id="street-view"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#street-view {
  height: 100%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
    </script>

Try it yourself

Hover at top right of the code block to copy the code or open it in JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Street View Panorama Tiles</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #street-view {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="street-view"></div>
    <script>

      var panorama;

      // StreetViewPanoramaData of a panorama just outside the Google Sydney office.
      var outsideGoogle;

      // StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
      function getReceptionPanoramaData() {
        return {
          location: {
            pano: 'reception',  // The ID for this custom panorama.
            description: 'Google Sydney - Reception',
            latLng: new google.maps.LatLng(-33.86684, 151.19583)
          },
          links: [{
            heading: 195,
            description: 'Exit',
            pano: outsideGoogle.location.pano
          }],
          copyright: 'Imagery (c) 2010 Google',
          tiles: {
            tileSize: new google.maps.Size(1024, 512),
            worldSize: new google.maps.Size(2048, 1024),
            centerHeading: 105,
            getTileUrl: function(pano, zoom, tileX, tileY) {
              return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/' +
                  'panoReception1024-' + zoom + '-' + tileX + '-' + tileY + '.jpg';
            }
          }
        };
      }

      function initPanorama() {
        panorama = new google.maps.StreetViewPanorama(
            document.getElementById('street-view'),
            {pano: outsideGoogle.location.pano});
        // Register a provider for the custom panorama.
        panorama.registerPanoProvider(function(pano) {
          if (pano === 'reception') {
            return getReceptionPanoramaData();
          }
          return null;
        });

        // Add a link to our custom panorama from outside the Google Sydney office.
        panorama.addListener('links_changed', function() {
          if (panorama.getPano() === outsideGoogle.location.pano) {
            panorama.getLinks().push({
              description: 'Google Sydney',
              heading: 25,
              pano: 'reception'
            });
          }
        });
      }

      function initialize() {
        // Use the Street View service to find a pano ID on Pirrama Rd, outside the
        // Google office.
        var streetviewService = new google.maps.StreetViewService;
        streetviewService.getPanorama(
            {location: {lat: -33.867386, lng: 151.195767}},
            function(result, status) {
              if (status === 'OK') {
                outsideGoogle = result;
                initPanorama();
              }
            });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
    </script>
  </body>
</html>

发送以下问题的反馈:

此网页
Maps JavaScript API
Maps JavaScript API
需要帮助?请访问我们的支持页面