Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Street View Events</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
#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: 420px;
        height: 315px;
        float: left;
      }
      #floating-panel {
        width: 400px;
        height: 100%;
        float: left;
        text-align: left;
        overflow: auto;
        position: static;
        border: 0px solid #999;
      }
    </style>
    <!-- 下列這行其實應該是不需要的
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true"></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>
    <script>
function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 24.123414, lng: 120.678641},
        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 + '';
  });
}
​
    </script>
    <script
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initPano"
        async defer>
    </script>
  </body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers