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

Street View service

Read the documentation or view this example fullscreen.

function initialize() {
  var fenway = {lat: 42.345573, lng: -71.098326};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: fenway,
    zoom: 14
  });
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
  map.setStreetView(panorama);
}
<div id="map"></div>
<div id="pano"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map, #pano {
  float: left;
  height: 100%;
  width: 45%;
}
<!-- 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>
    <meta charset="utf-8">
    <title>Street View side-by-side</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map, #pano {
        float: left;
        height: 100%;
        width: 45%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="pano"></div>
    <script>

      function initialize() {
        var fenway = {lat: 42.345573, lng: -71.098326};
        var map = new google.maps.Map(document.getElementById('map'), {
          center: fenway,
          zoom: 14
        });
        var panorama = new google.maps.StreetViewPanorama(
            document.getElementById('pano'), {
              position: fenway,
              pov: {
                heading: 34,
                pitch: 10
              }
            });
        map.setStreetView(panorama);
      }
    </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
需要帮助?请访问我们的支持页面