Google Maps JavaScript API v3

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&sensor=false"></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>

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.