Street View Events

function initPano() {   const panorama = new google.maps.StreetViewPanorama(     document.getElementById("pano") as HTMLElement,     {       position: { lat: 37.869, lng: -122.255 },       pov: {         heading: 270,         pitch: 0,       },       visible: true,     }   );    panorama.addListener("pano_changed", () => {     const panoCell = document.getElementById("pano-cell") as HTMLElement;      panoCell.innerHTML = panorama.getPano();   });    panorama.addListener("links_changed", () => {     const linksTable = document.getElementById("links_table") as HTMLElement;      while (linksTable.hasChildNodes()) {       linksTable.removeChild(linksTable.lastChild as ChildNode);     }      const links = panorama.getLinks();      for (const i in links) {       const row = document.createElement("tr");        linksTable.appendChild(row);        const labelCell = document.createElement("td");        labelCell.innerHTML = "<b>Link: " + i + "</b>";        const valueCell = document.createElement("td");        valueCell.innerHTML = links[i].description as string;       linksTable.appendChild(labelCell);       linksTable.appendChild(valueCell);     }   });    panorama.addListener("position_changed", () => {     const positionCell = document.getElementById(       "position-cell"     ) as HTMLElement;      (positionCell.firstChild as HTMLElement).nodeValue =       panorama.getPosition() + "";   });    panorama.addListener("pov_changed", () => {     const headingCell = document.getElementById("heading-cell") as HTMLElement;     const pitchCell = document.getElementById("pitch-cell") as HTMLElement;      (headingCell.firstChild as HTMLElement).nodeValue =       panorama.getPov().heading + "";     (pitchCell.firstChild as HTMLElement).nodeValue =       panorama.getPov().pitch + "";   }); }  declare global {   interface Window {     initPano: () => void;   } } window.initPano = initPano;
index.ts

function initPano() {   const 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", () => {     const panoCell = document.getElementById("pano-cell");      panoCell.innerHTML = panorama.getPano();   });   panorama.addListener("links_changed", () => {     const linksTable = document.getElementById("links_table");      while (linksTable.hasChildNodes()) {       linksTable.removeChild(linksTable.lastChild);     }      const links = panorama.getLinks();      for (const i in links) {       const row = document.createElement("tr");        linksTable.appendChild(row);        const labelCell = document.createElement("td");        labelCell.innerHTML = "<b>Link: " + i + "</b>";        const valueCell = document.createElement("td");        valueCell.innerHTML = links[i].description;       linksTable.appendChild(labelCell);       linksTable.appendChild(valueCell);     }   });   panorama.addListener("position_changed", () => {     const positionCell = document.getElementById("position-cell");      positionCell.firstChild.nodeValue = panorama.getPosition() + "";   });   panorama.addListener("pov_changed", () => {     const headingCell = document.getElementById("heading-cell");     const pitchCell = document.getElementById("pitch-cell");      headingCell.firstChild.nodeValue = panorama.getPov().heading + "";     pitchCell.firstChild.nodeValue = panorama.getPov().pitch + "";   }); }  window.initPano = initPano;
index.js

/*   * 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.css

<html>   <head>     <title>Street View Events</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.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>      <!--        The `defer` attribute causes the script to execute after the full HTML       document has been parsed. For non-blocking uses, avoiding race conditions,       and consistent behavior across browsers, consider loading using Promises. See       https://developers.google.com/maps/documentation/javascript/load-maps-js-api       for more information.       -->     <script       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"       defer     ></script>   </body> </html>
index.html