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.

TypeScript

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

let map: google.maps.Map;

let panorama: google.maps.StreetViewPanorama;

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

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

  // Set up the map.
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    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", event => {
    sv.getPanorama({ location: event.latLng, radius: 50 }, processSVData);
  });
}

function processSVData(
  data: google.maps.StreetViewPanoramaData | null,
  status: google.maps.StreetViewStatus
) {
  if (status === "OK") {
    const location = (data as google.maps.StreetViewPanoramaData)
      .location as google.maps.StreetViewLocation;
    const marker = new google.maps.Marker({
      position: location.latLng,
      map,
      title: location.description
    });

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

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

JavaScript

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

function initMap() {
  const berkeley = { lat: 37.869085, lng: -122.254775 };
  const 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", event => {
    sv.getPanorama({ location: event.latLng, radius: 50 }, processSVData);
  });
}

function processSVData(data, status) {
  if (status === "OK") {
    const location = data.location;
    const marker = new google.maps.Marker({
      position: location.latLng,
      map,
      title: location.description
    });
    panorama.setPano(location.pano);
    panorama.setPov({
      heading: 270,
      pitch: 0
    });
    panorama.setVisible(true);
    marker.addListener("click", () => {
      const markerPanoID = 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


      

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>
      "use strict";

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

      function initMap() {
        const berkeley = {
          lat: 37.869085,
          lng: -122.254775
        };
        const 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", event => {
          sv.getPanorama(
            {
              location: event.latLng,
              radius: 50
            },
            processSVData
          );
        });
      }

      function processSVData(data, status) {
        if (status === "OK") {
          const location = data.location;
          const marker = new google.maps.Marker({
            position: location.latLng,
            map,
            title: location.description
          });
          panorama.setPano(location.pano);
          panorama.setPov({
            heading: 270,
            pitch: 0
          });
          panorama.setVisible(true);
          marker.addListener("click", () => {
            const markerPanoID = 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.");
        }
      }
    </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>
"use strict"; /* * Click the map to set a new location for the Street View camera. */ let map; let panorama; function initMap() { const berkeley = { lat: 37.869085, lng: -122.254775 }; const 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", event => { sv.getPanorama( { location: event.latLng, radius: 50 }, processSVData ); }); } function processSVData(data, status) { if (status === "OK") { const location = data.location; const marker = new google.maps.Marker({ position: location.latLng, map, title: location.description }); panorama.setPano(location.pano); panorama.setPov({ heading: 270, pitch: 0 }); panorama.setVisible(true); marker.addListener("click", () => { const markerPanoID = 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."); } }
/* 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=AIzaSyCb1xprYSpXd0q_yDsJ1W2UGhfl9_YGKU0&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>