Custom Street View Panorama Tiles

let panorama: google.maps.StreetViewPanorama;  // StreetViewPanoramaData of a panorama just outside the Google Sydney office. let outsideGoogle: google.maps.StreetViewPanoramaData;  // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData(): google.maps.StreetViewPanoramaData {   return {     location: {       pano: "reception", // The ID for this custom panorama.       description: "Google Sydney - Reception",       latLng: new google.maps.LatLng(-33.86684, 151.19583),     },     links: [       {         heading: 195,         description: "Exit",         pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano,       },     ],     copyright: "Imagery (c) 2010 Google",     tiles: {       tileSize: new google.maps.Size(1024, 512),       worldSize: new google.maps.Size(2048, 1024),       centerHeading: 105,       getTileUrl: function (         pano: string,         zoom: number,         tileX: number,         tileY: number       ): string {         return (           "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +           "panoReception1024-" +           zoom +           "-" +           tileX +           "-" +           tileY +           ".jpg"         );       },     },   }; }  function initPanorama() {   panorama = new google.maps.StreetViewPanorama(     document.getElementById("street-view") as HTMLElement,     { pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano }   );   // Register a provider for the custom panorama.   panorama.registerPanoProvider(     (pano: string): google.maps.StreetViewPanoramaData => {       if (pano === "reception") {         return getReceptionPanoramaData();       }       // @ts-ignore TODO fix typings       return null;     }   );    // Add a link to our custom panorama from outside the Google Sydney office.   panorama.addListener("links_changed", () => {     if (       panorama.getPano() ===       (outsideGoogle.location as google.maps.StreetViewLocation).pano     ) {       panorama.getLinks().push({         description: "Google Sydney",         heading: 25,         pano: "reception",       });     }   }); }  function initMap(): void {   // Use the Street View service to find a pano ID on Pirrama Rd, outside the   // Google office.   new google.maps.StreetViewService()     .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } })     .then(({ data }: google.maps.StreetViewResponse) => {       outsideGoogle = data;       initPanorama();     }); }  declare global {   interface Window {     initMap: () => void;   } } window.initMap = initMap;
index.ts

let panorama; // StreetViewPanoramaData of a panorama just outside the Google Sydney office. let outsideGoogle;  // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData() {   return {     location: {       pano: "reception", // The ID for this custom panorama.       description: "Google Sydney - Reception",       latLng: new google.maps.LatLng(-33.86684, 151.19583),     },     links: [       {         heading: 195,         description: "Exit",         pano: outsideGoogle.location.pano,       },     ],     copyright: "Imagery (c) 2010 Google",     tiles: {       tileSize: new google.maps.Size(1024, 512),       worldSize: new google.maps.Size(2048, 1024),       centerHeading: 105,       getTileUrl: function (pano, zoom, tileX, tileY) {         return (           "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +           "panoReception1024-" +           zoom +           "-" +           tileX +           "-" +           tileY +           ".jpg"         );       },     },   }; }  function initPanorama() {   panorama = new google.maps.StreetViewPanorama(     document.getElementById("street-view"),     { pano: outsideGoogle.location.pano },   );   // Register a provider for the custom panorama.   panorama.registerPanoProvider((pano) => {     if (pano === "reception") {       return getReceptionPanoramaData();     }     // @ts-ignore TODO fix typings     return null;   });   // Add a link to our custom panorama from outside the Google Sydney office.   panorama.addListener("links_changed", () => {     if (panorama.getPano() === outsideGoogle.location.pano) {       panorama.getLinks().push({         description: "Google Sydney",         heading: 25,         pano: "reception",       });     }   }); }  function initMap() {   // Use the Street View service to find a pano ID on Pirrama Rd, outside the   // Google office.   new google.maps.StreetViewService()     .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } })     .then(({ data }) => {       outsideGoogle = data;       initPanorama();     }); }  window.initMap = initMap;
index.js

html, body {   height: 100%;   margin: 0;   padding: 0; }  #street-view {   height: 100%; } 
style.css

<html>   <head>     <title>Custom Street View Panorama Tiles</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.js"></script>   </head>   <body>     <div id="street-view"></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=initMap&v=weekly"       defer     ></script>   </body> </html>
index.html