It's the 15th anniversary of Google Maps Platform - Check out the latest news and announcements

Directly Accessing Street View Data

This example displays a map, alongside a window that shows the Street View at the current marker's location on the map. The user can click the map to place a new marker and move the Street View location.

Read the documentation.

JavaScript

/*
 * Click the map to set a new location for the Street View camera.
 */

var map;
var panorama;

function initMap() {
  var berkeley = { lat: 37.869085, lng: -122.254775 };
  var sv = new google.maps.StreetViewService();

  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano")
  );

  // Set up the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: berkeley,
    zoom: 16,
    streetViewControl: false
  });

  // Set the initial Street View camera to the center of the map
  sv.getPanorama({ location: berkeley, radius: 50 }, processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanorama will return the nearest pano when the given
  // radius is 50 meters or less.
  map.addListener("click", function(event) {
    sv.getPanorama({ location: event.latLng, radius: 50 }, processSVData);
  });
}

function processSVData(data, status) {
  if (status === "OK") {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

    panorama.setPano(data.location.pano);
    panorama.setPov({
      heading: 270,
      pitch: 0
    });
    panorama.setVisible(true);

    marker.addListener("click", function() {
      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID.
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });
  } else {
    console.error("Street View data not found for this location.");
  }
}

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Directly Accessing Street View Data</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./app.js"></script>
  </head>
  <body>
    <div id="map" style="width: 45%; height: 100%;float:left"></div>
    <div id="pano" style="width: 45%; height: 100%;float:left"></div>
  </body>
</html>

All

<!DOCTYPE html>
<html>
  <head>
    <title>Directly Accessing Street View Data</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      (function(exports) {
        "use strict";

        /*
         * Click the map to set a new location for the Street View camera.
         */

        function initMap() {
          var berkeley = {
            lat: 37.869085,
            lng: -122.254775
          };
          var sv = new google.maps.StreetViewService();
          exports.panorama = new google.maps.StreetViewPanorama(
            document.getElementById("pano")
          ); // Set up the map.

          exports.map = new google.maps.Map(document.getElementById("map"), {
            center: berkeley,
            zoom: 16,
            streetViewControl: false
          }); // Set the initial Street View camera to the center of the map

          sv.getPanorama(
            {
              location: berkeley,
              radius: 50
            },
            processSVData
          ); // Look for a nearby Street View panorama when the map is clicked.
          // getPanorama will return the nearest pano when the given
          // radius is 50 meters or less.

          exports.map.addListener("click", function(event) {
            sv.getPanorama(
              {
                location: event.latLng,
                radius: 50
              },
              processSVData
            );
          });
        }

        function processSVData(data, status) {
          if (status === "OK") {
            var marker = new google.maps.Marker({
              position: data.location.latLng,
              map: exports.map,
              title: data.location.description
            });
            exports.panorama.setPano(data.location.pano);
            exports.panorama.setPov({
              heading: 270,
              pitch: 0
            });
            exports.panorama.setVisible(true);
            marker.addListener("click", function() {
              var markerPanoID = data.location.pano; // Set the Pano to use the passed panoID.

              exports.panorama.setPano(markerPanoID);
              exports.panorama.setPov({
                heading: 270,
                pitch: 0
              });
              exports.panorama.setVisible(true);
            });
          } else {
            console.error("Street View data not found for this location.");
          }
        }

        exports.initMap = initMap;
        exports.processSVData = processSVData;
      })((this.window = this.window || {}));
    </script>
  </head>
  <body>
    <div id="map" style="width: 45%; height: 100%;float:left"></div>
    <div id="pano" style="width: 45%; height: 100%;float:left"></div>
  </body>
</html>
(function(exports) { "use strict"; /* * Click the map to set a new location for the Street View camera. */ function initMap() { var berkeley = { lat: 37.869085, lng: -122.254775 }; var sv = new google.maps.StreetViewService(); exports.panorama = new google.maps.StreetViewPanorama( document.getElementById("pano") ); // Set up the map. exports.map = new google.maps.Map(document.getElementById("map"), { center: berkeley, zoom: 16, streetViewControl: false }); // Set the initial Street View camera to the center of the map sv.getPanorama( { location: berkeley, radius: 50 }, processSVData ); // Look for a nearby Street View panorama when the map is clicked. // getPanorama will return the nearest pano when the given // radius is 50 meters or less. exports.map.addListener("click", function(event) { sv.getPanorama( { location: event.latLng, radius: 50 }, processSVData ); }); } function processSVData(data, status) { if (status === "OK") { var marker = new google.maps.Marker({ position: data.location.latLng, map: exports.map, title: data.location.description }); exports.panorama.setPano(data.location.pano); exports.panorama.setPov({ heading: 270, pitch: 0 }); exports.panorama.setVisible(true); marker.addListener("click", function() { var markerPanoID = data.location.pano; // Set the Pano to use the passed panoID. exports.panorama.setPano(markerPanoID); exports.panorama.setPov({ heading: 270, pitch: 0 }); exports.panorama.setVisible(true); }); } else { console.error("Street View data not found for this location."); } } exports.initMap = initMap; exports.processSVData = processSVData; })((this.window = this.window || {}));
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<!DOCTYPE html> <html> <head> <title>Directly Accessing Street View Data</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=&v=weekly" defer ></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map" style="width: 45%; height: 100%;float:left"></div> <div id="pano" style="width: 45%; height: 100%;float:left"></div> </body> </html>