Read the documentation or view this example fullscreen.
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 + ''; }); }
<div id="pano"></div> <div id="floating-panel"> <table> <tr> <td><b>Position</b></td><td id="position-cell"> </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"> </td> </tr> <table id="links_table"></table> </table> </div>
/* 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; }
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano"> </script>
Try it yourself
You can experiment with this code in JSFiddle by clicking the <>
icon in the
top-right corner of the code window.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Street View Events</title> <style> /* 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 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> </head> <body> <div id="pano"></div> <div id="floating-panel"> <table> <tr> <td><b>Position</b></td><td id="position-cell"> </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"> </td> </tr> <table id="links_table"></table> </table> </div> <script> 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 + ''; }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initPano" async defer> </script> </body> </html>