Custom Street View Panorama Tiles

This example displays a Street View outside of the Google Sydney office. It adds another arrow to the image, in addition to the default Street View navigation arrows, that points into Google Sydney and links to a custom panorama.

Read the documentation.

TypeScript

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(jpoehnelt) 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.
  const streetviewService = new google.maps.StreetViewService();
  streetviewService.getPanorama(
    { location: { lat: -33.867386, lng: 151.195767 } },
    (
      result: google.maps.StreetViewPanoramaData | null,
      status: google.maps.StreetViewStatus
    ) => {
      if (status === google.maps.StreetViewStatus.OK && result) {
        outsideGoogle = result;
        initPanorama();
      }
    }
  );
}

JavaScript

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",
      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();
    }
    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.
  const streetviewService = new google.maps.StreetViewService();
  streetviewService.getPanorama(
    { location: { lat: -33.867386, lng: 151.195767 } },
    (result, status) => {
      if (status === google.maps.StreetViewStatus.OK && result) {
        outsideGoogle = result;
        initPanorama();
      }
    }
  );
}

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#street-view {
  height: 100%;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Street View Panorama Tiles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="street-view"></div>
  </body>
</html>

All

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Street View Panorama Tiles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/css">
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #street-view {
        height: 100%;
      }
    </style>
    <script>
      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",
            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();
          }
          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.
        const streetviewService = new google.maps.StreetViewService();
        streetviewService.getPanorama(
          { location: { lat: -33.867386, lng: 151.195767 } },
          (result, status) => {
            if (status === google.maps.StreetViewStatus.OK && result) {
              outsideGoogle = result;
              initPanorama();
            }
          }
        );
      }
    </script>
  </head>
  <body>
    <div id="street-view"></div>
  </body>
</html>
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", 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(); } 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. const streetviewService = new google.maps.StreetViewService(); streetviewService.getPanorama( { location: { lat: -33.867386, lng: 151.195767 } }, (result, status) => { if (status === google.maps.StreetViewStatus.OK && result) { outsideGoogle = result; initPanorama(); } } ); }
html, body { height: 100%; margin: 0; padding: 0; } #street-view { height: 100%; }
<!DOCTYPE html> <html> <head> <title>Custom Street View Panorama Tiles</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly" defer ></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="street-view"></div> </body> </html>

Create a starter application from sample

A skeleton starter application using TypeScript, Webpack, and Babel can be generated from this sample using one of the methods below.

Run Locally

Node.js is required to run this sample locally. Follow these instructions to install Node.js and NPM.

npx @googlemaps/js-samples init streetview-custom-tiles DESTINATION_FOLDER

Run in Google Cloud Shell

Google Cloud Shell is an interactive shell environment for Google Cloud Platform that makes it easy for you to learn and experiment with GCP and manage your projects and resources from your web browser.

Run in Cloud Shell