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

Street View Events

This example displays a Street View panorama, alongside a window that tracks several types of data associated with Street View events. This data can be tracked to better understand the performance of the underlying StreetViewPanorama object.

Read the documentation.

JavaScript

function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: { lat: 37.869, lng: -122.255 },
      pov: {
        heading: 270,
        pitch: 0
      },
      visible: true
    }
  );

  panorama.addListener("pano_changed", function() {
    var panoCell = document.getElementById("pano-cell");
    panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener("links_changed", function() {
    var linksTable = document.getElementById("links_table");
    while (linksTable.hasChildNodes()) {
      linksTable.removeChild(linksTable.lastChild);
    }
    var links = panorama.getLinks();
    for (var i in links) {
      var row = document.createElement("tr");
      linksTable.appendChild(row);
      var labelCell = document.createElement("td");
      labelCell.innerHTML = "<b>Link: " + i + "</b>";
      var valueCell = document.createElement("td");
      valueCell.innerHTML = links[i].description;
      linksTable.appendChild(labelCell);
      linksTable.appendChild(valueCell);
    }
  });

  panorama.addListener("position_changed", function() {
    var positionCell = document.getElementById("position-cell");
    positionCell.firstChild.nodeValue = panorama.getPosition() + "";
  });

  panorama.addListener("pov_changed", function() {
    var headingCell = document.getElementById("heading-cell");
    var pitchCell = document.getElementById("pitch-cell");
    headingCell.firstChild.nodeValue = panorama.getPov().heading + "";
    pitchCell.firstChild.nodeValue = panorama.getPov().pitch + "";
  });
}

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;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

#pano {
  width: 50%;
  height: 100%;
  float: left;
}

#floating-panel {
  width: 45%;
  height: 100%;
  float: right;
  text-align: left;
  overflow: auto;
  position: static;
  border: 0px solid #999;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Street View Events</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=initPano&libraries=&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./app.js"></script>
  </head>
  <body>
    <div id="pano"></div>
    <div id="floating-panel">
      <table>
        <tr>
          <td><b>Position</b></td>
          <td id="position-cell">&nbsp;</td>
        </tr>
        <tr>
          <td><b>POV Heading</b></td>
          <td id="heading-cell">270</td>
        </tr>
        <tr>
          <td><b>POV Pitch</b></td>
          <td id="pitch-cell">0.0</td>
        </tr>
        <tr>
          <td><b>Pano ID</b></td>
          <td id="pano-cell">&nbsp;</td>
        </tr>
        <table id="links_table"></table>
      </table>
    </div>
  </body>
</html>

All

<!DOCTYPE html>
<html>
  <head>
    <title>Street View Events</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=initPano&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;
      }

      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: "Roboto", "sans-serif";
        line-height: 30px;
        padding-left: 10px;
      }

      #pano {
        width: 50%;
        height: 100%;
        float: left;
      }

      #floating-panel {
        width: 45%;
        height: 100%;
        float: right;
        text-align: left;
        overflow: auto;
        position: static;
        border: 0px solid #999;
      }
    </style>
    <script>
      (function(exports) {
        "use strict";

        function initPano() {
          var panorama = new google.maps.StreetViewPanorama(
            document.getElementById("pano"),
            {
              position: {
                lat: 37.869,
                lng: -122.255
              },
              pov: {
                heading: 270,
                pitch: 0
              },
              visible: true
            }
          );
          panorama.addListener("pano_changed", function() {
            var panoCell = document.getElementById("pano-cell");
            panoCell.innerHTML = panorama.getPano();
          });
          panorama.addListener("links_changed", function() {
            var linksTable = document.getElementById("links_table");

            while (linksTable.hasChildNodes()) {
              linksTable.removeChild(linksTable.lastChild);
            }

            var links = panorama.getLinks();

            for (var i in links) {
              var row = document.createElement("tr");
              linksTable.appendChild(row);
              var labelCell = document.createElement("td");
              labelCell.innerHTML = "<b>Link: " + i + "</b>";
              var valueCell = document.createElement("td");
              valueCell.innerHTML = links[i].description;
              linksTable.appendChild(labelCell);
              linksTable.appendChild(valueCell);
            }
          });
          panorama.addListener("position_changed", function() {
            var positionCell = document.getElementById("position-cell");
            positionCell.firstChild.nodeValue = panorama.getPosition() + "";
          });
          panorama.addListener("pov_changed", function() {
            var headingCell = document.getElementById("heading-cell");
            var pitchCell = document.getElementById("pitch-cell");
            headingCell.firstChild.nodeValue = panorama.getPov().heading + "";
            pitchCell.firstChild.nodeValue = panorama.getPov().pitch + "";
          });
        }

        exports.initPano = initPano;
      })((this.window = this.window || {}));
    </script>
  </head>
  <body>
    <div id="pano"></div>
    <div id="floating-panel">
      <table>
        <tr>
          <td><b>Position</b></td>
          <td id="position-cell">&nbsp;</td>
        </tr>
        <tr>
          <td><b>POV Heading</b></td>
          <td id="heading-cell">270</td>
        </tr>
        <tr>
          <td><b>POV Pitch</b></td>
          <td id="pitch-cell">0.0</td>
        </tr>
        <tr>
          <td><b>Pano ID</b></td>
          <td id="pano-cell">&nbsp;</td>
        </tr>
        <table id="links_table"></table>
      </table>
    </div>
  </body>
</html>
(function(exports) { "use strict"; function initPano() { var panorama = new google.maps.StreetViewPanorama( document.getElementById("pano"), { position: { lat: 37.869, lng: -122.255 }, pov: { heading: 270, pitch: 0 }, visible: true } ); panorama.addListener("pano_changed", function() { var panoCell = document.getElementById("pano-cell"); panoCell.innerHTML = panorama.getPano(); }); panorama.addListener("links_changed", function() { var linksTable = document.getElementById("links_table"); while (linksTable.hasChildNodes()) { linksTable.removeChild(linksTable.lastChild); } var links = panorama.getLinks(); for (var i in links) { var row = document.createElement("tr"); linksTable.appendChild(row); var labelCell = document.createElement("td"); labelCell.innerHTML = "<b>Link: " + i + "</b>"; var valueCell = document.createElement("td"); valueCell.innerHTML = links[i].description; linksTable.appendChild(labelCell); linksTable.appendChild(valueCell); } }); panorama.addListener("position_changed", function() { var positionCell = document.getElementById("position-cell"); positionCell.firstChild.nodeValue = panorama.getPosition() + ""; }); panorama.addListener("pov_changed", function() { var headingCell = document.getElementById("heading-cell"); var pitchCell = document.getElementById("pitch-cell"); headingCell.firstChild.nodeValue = panorama.getPov().heading + ""; pitchCell.firstChild.nodeValue = panorama.getPov().pitch + ""; }); } exports.initPano = initPano; })((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; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: "Roboto", "sans-serif"; line-height: 30px; padding-left: 10px; } #pano { width: 50%; height: 100%; float: left; } #floating-panel { width: 45%; height: 100%; float: right; text-align: left; overflow: auto; position: static; border: 0px solid #999; }
<!DOCTYPE html> <html> <head> <title>Street View Events</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initPano&libraries=&v=weekly" defer ></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="pano"></div> <div id="floating-panel"> <table> <tr> <td><b>Position</b></td> <td id="position-cell">&nbsp;</td> </tr> <tr> <td><b>POV Heading</b></td> <td id="heading-cell">270</td> </tr> <tr> <td><b>POV Pitch</b></td> <td id="pitch-cell">0.0</td> </tr> <tr> <td><b>Pano ID</b></td> <td id="pano-cell">&nbsp;</td> </tr> <table id="links_table"></table> </table> </div> </body> </html>