Street View events

View this example full screen.

JavaScript

var cafe = new google.maps.LatLng(37.869085, -122.254775);

function initialize() {

  var panoramaOptions = {
    position: cafe,
    pov: {
      heading: 270,
      pitch: 0
    },
    visible: true
  };
  var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);

  google.maps.event.addListener(panorama, 'pano_changed', function() {
      var panoCell = document.getElementById('pano_cell');
      panoCell.innerHTML = panorama.getPano();
  });

  google.maps.event.addListener(panorama, '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);
      }
  });

  google.maps.event.addListener(panorama, 'position_changed', function() {
      var positionCell = document.getElementById('position_cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  google.maps.event.addListener(panorama, '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 + '';
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

JavaScript + HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Street View events</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var cafe = new google.maps.LatLng(37.869085, -122.254775);

function initialize() {

  var panoramaOptions = {
    position: cafe,
    pov: {
      heading: 270,
      pitch: 0
    },
    visible: true
  };
  var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);

  google.maps.event.addListener(panorama, 'pano_changed', function() {
      var panoCell = document.getElementById('pano_cell');
      panoCell.innerHTML = panorama.getPano();
  });

  google.maps.event.addListener(panorama, '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);
      }
  });

  google.maps.event.addListener(panorama, 'position_changed', function() {
      var positionCell = document.getElementById('position_cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  google.maps.event.addListener(panorama, '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 + '';
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="pano" style="width: 45%; height: 100%;float:left"></div>
    <div id="panoInfo" style="width: 45%; height: 100%;float:left">
    <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>

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.

Last updated March 17, 2015.