Servizio Street View

Panoramica

Google Street View offre viste panoramiche a 360° dal strade designate in tutta l'area di copertura. API di Street View la copertura è la stessa dell'applicazione Google Maps (https://maps.google.com/) L'elenco delle categorie attualmente città supportate per Street View è disponibile nel Google sito web di Maps.

Di seguito è mostrata un'immagine di esempio in Street View.

L'API Maps JavaScript fornisce un servizio Street View per ottenere e manipolare le immagini utilizzate in Google Maps. Street View. Questo servizio Street View è supportato in modo nativo all'interno del browser.

Utilizzo delle mappe di Street View

Street View può essere utilizzato in una elemento DOM standalone, è la maggior parte utile quando si indica una località su una mappa. Per impostazione predefinita, Street View è attiva su una mappa e viene visualizzato un controllo Pegman di Street View integrati nei controlli di navigazione (zoom e panoramica). Puoi nascondere questa controllo all'interno di MapOptions della mappa impostando streetViewControl a false. Puoi anche modificare la posizione predefinita del controllo Street View impostare il streetViewControlOptions.position di Map in un nuovo ControlPosition.

Il controllo Pegman di Street View ti consente di visualizzare panoramiche direttamente all'interno della mappa. Quando l'utente fa clic e tieni premuto il Pegman, la mappa si aggiorna mostrando i contorni blu delle strade compatibili con Street View, offrendo un'esperienza utente simile a quella dell'app Google Maps.

Quando l'utente inserisce l'indicatore Pegman su una strada, la mappa si aggiorna in mostrare una panoramica Street View della località indicata.

Panorami di Street View

Le immagini di Street View sono supportate tramite l'utilizzo StreetViewPanorama, che fornisce un'API a un "visualizzatore" di Street View. Ogni mappa contiene un valore predefinito Panoramica in Street View, che puoi recuperare chiamando il il metodo getStreetView() della mappa. Quando aggiungi un'immagine di Street View controllo sulla mappa impostandone il streetViewControl per true, collegherai automaticamente Pegman per questa panoramica predefinita di Street View.

Puoi anche creare il tuo StreetViewPanorama e impostare la mappa per utilizzarlo al posto di quello predefinito, impostando esplicitamente la proprietà streetView della mappa su dell'oggetto creato. Ti consigliamo di ignorare la panoramica predefinita se vuoi modificare il comportamento predefinito, come la configurazione condivisione di overlay tra la mappa e il panorama. (Vedi Overlay in Street View di seguito.

Contenitori di Street View

Potresti voler visualizzare un StreetViewPanorama all'interno di un elemento DOM separato, spesso un elemento <div>. Devi solo passare l'elemento DOM all'interno della memoria di StreetViewPanorama come costruttore. Per una visualizzazione ottimale delle immagini, consigliamo una dimensione minima di 200 x 200 pixel.

Nota:anche se Street View è stata progettata per essere usata insieme a una mappa, e l'utilizzo non è obbligatorio. Puoi utilizzare un oggetto Street View indipendente senza una mappa.

Località e punto di vista (POV) di Street View

Il costruttore StreetViewPanorama ti consente inoltre di imposta la posizione e il punto di vista di Street View utilizzando StreetViewOptions. Puoi chiamare setPosition() e setPov() sull'oggetto dopo per modificarne la posizione e il POV.

La posizione di Street View definisce la posizione della messa a fuoco della fotocamera per un'immagine, ma non definisce l'orientamento della fotocamera per l'immagine in questione. A questo scopo, l'oggetto StreetViewPov definisce due proprietà:

• heading (0) definisce l'angolo di rotazione intorno al locus della fotocamera in gradi rispetto al nord reale. Le intestazioni sono misurato in senso orario (90 gradi corrisponde al vero est).
• pitch (il valore predefinito 0) definisce la varianza dell'angolo "su" o "giù" dal tono predefinito iniziale della videocamera, che spesso è (ma non sempre) orizzontale. Ad esempio, un'immagine scattata su una collina presenta probabilmente un'inclinazione predefinita non orizzontale). Gli angoli di inclinazione sono misurata con valori positivi rivolti dall'alto (fino a +90 gradi in verticale ortogonale all'inclinazione predefinita) e valori negativi rivolti verso il basso (a -90 gradi dritti verso il basso e ortogonali all'inclinazione predefinita).

L'oggetto StreetViewPov viene utilizzato più spesso per determinare il punto di vista della fotocamera di Street View. Puoi anche determinare punto di vista del fotografo, generalmente la direzione auto o un trike stava affrontando, con StreetViewPanorama.getPhotographerPov().

Il seguente codice mostra una mappa di Boston con una vista iniziale di Fenway Parco. Selezione del Pegman e trascinamento in una posizione supportata sulla mappa cambia la panoramica di Street View:

function initialize() {
  const fenway = { lat: 42.345573, lng: -71.098326 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: fenway,
      zoom: 14,
    }
  );
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano") as HTMLElement,
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
      },
    }
  );

  map.setStreetView(panorama);
}

declare global {
  interface Window {
    initialize: () => void;
  }
}
window.initialize = initialize;
index.ts

function initialize() {
  const fenway = { lat: 42.345573, lng: -71.098326 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14,
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
      },
    },
  );

  map.setStreetView(panorama);
}

window.initialize = initialize;
index.js

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

#map,
#pano {
  float: left;
  height: 100%;
  width: 50%;
}
style.css

<html>
  <head>
    <title>Street View split-map-panes</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <div id="pano"></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=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Rilevamento del movimento sui dispositivi mobili

Sui dispositivi che supportano eventi di orientamento dei dispositivi, l'API offre agli utenti di modificare il punto di vista di Street View in base allo spostamento del dispositivo. Gli utenti possono guardarsi intorno spostando i dispositivi. Questo fenomeno è chiamato movimento o la rotazione del dispositivo.

In qualità di sviluppatore di app, puoi modificare il comportamento predefinito nel seguente modo:

• Attiva o disattiva la funzionalità di rilevamento del movimento. Per impostazione predefinita, Il monitoraggio è attivato su qualsiasi dispositivo che lo supporta. Il seguente esempio disattiva il rilevamento del movimento, ma lascia visibile il relativo controllo. Tieni presente che l'utente può attivare il rilevamento del movimento toccando il controllo.

  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869260, lng: -122.254811},
        pov: {heading: 165, pitch: 0},
        motionTracking: false
      });
  

• Nascondi o mostra il controllo di rilevamento del movimento. Per impostazione predefinita, visualizzata sui dispositivi che supportano il rilevamento del movimento. L'utente può toccare per attivare o disattivare il rilevamento del movimento. Tieni presente che il controllo non vengono mai visualizzati se il dispositivo non supporta il rilevamento del movimento, indipendentemente il valore di motionTrackingControl.

  Il seguente esempio disabilita sia il rilevamento del movimento che il controllo di rilevamento del movimento. In questo caso, l'utente non può attivare il movimento monitoraggio su:

  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869260, lng: -122.254811},
        pov: {heading: 165, pitch: 0},
        motionTracking: false,
        motionTrackingControl: false
      });
  

• Modifica la posizione predefinita del controllo di rilevamento del movimento. Per impostazione predefinita, il controllo viene visualizzato in basso a destra della panoramica (posizione RIGHT_BOTTOM). Il seguente esempio imposta la posizione dell'oggetto controllo in basso a sinistra:

  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869260, lng: -122.254811},
        pov: {heading: 165, pitch: 0},
        motionTrackingControlOptions: {
          position: google.maps.ControlPosition.LEFT_BOTTOM
        }
      });
  

Per vedere il rilevamento del movimento in azione, guarda il seguente esempio su un dispositivo mobile dispositivo (o qualsiasi dispositivo che supporti gli eventi di orientamento del dispositivo):

Visualizza esempio

Overlay in Street View

L'oggetto StreetViewPanorama predefinito supporta l'ambiente nativo visualizzazione della mappa overlay. Gli overlay generalmente vengono visualizzati a "livello strada" ancorato a LatLng posizioni. Gli indicatori appariranno con la coda ancorata al campo piano orizzontale nella panoramica Street View, ad esempio.

Attualmente, i tipi di overlay supportati su Street View i panorami sono limitati a Marker, InfoWindow e OverlayView personalizzati. Gli overlay visualizzati su una mappa potrebbero essere visualizzato in una panoramica Street View considerando la panoramica come un sostituto per l'oggetto Map, chiamando setMap() e passando StreetViewPanorama come argomento invece che mappa. Informazioni analoghe finestre possono essere aperte in una panoramica di Street View richiamando open(), ha trasmesso StreetViewPanorama() invece di una mappa.

Inoltre, quando crei una mappa con un valore StreetViewPanorama, gli indicatori creati su una mappa vengono condivisi automaticamente con la panoramica Street View associata alla mappa, a condizione che panoramica è visibile. Per recuperare la panoramica predefinita di Street View, richiama getStreetView() sull'oggetto Map. Tieni presente che imposta esplicitamente la proprietà streetView della mappa su un StreetViewPanorama di tua costruzione, eseguirai l'override la panoramica predefinita.

L'esempio seguente mostra indicatori che indicano vari luoghi intorno a Astor Place, New York City. Passa alla visualizzazione Street View per mostrare indicatori condivisi visualizzati all'interno di StreetViewPanorama.

let panorama: google.maps.StreetViewPanorama;

function initMap(): void {
  const astorPlace = { lat: 40.729884, lng: -73.990988 };

  // Set up the map
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: astorPlace,
      zoom: 18,
      streetViewControl: false,
    }
  );

  document
    .getElementById("toggle")!
    .addEventListener("click", toggleStreetView);

  const cafeIcon = document.createElement("img");
  cafeIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg";

  const dollarIcon = document.createElement("img");
  dollarIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg";

  const busIcon = document.createElement("img");
  busIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg";


  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    title: "Cafe",
    icon: cafeIcon.src,
  });

  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    title: "Bank",
    icon: dollarIcon.src,
  });

  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    title: "Bus Stop",
    icon: busIcon.src,
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView()!; // TODO fix type
  panorama.setPosition(astorPlace);
  panorama.setPov(
    /** @type {google.maps.StreetViewPov} */ {
      heading: 265,
      pitch: 0,
    }
  );
}

function toggleStreetView(): void {
  const toggle = panorama.getVisible();

  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

let panorama;

function initMap() {
  const astorPlace = { lat: 40.729884, lng: -73.990988 };
  // Set up the map
  const map = new google.maps.Map(document.getElementById("map"), {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false,
  });

  document.getElementById("toggle").addEventListener("click", toggleStreetView);

  const cafeIcon = document.createElement("img");

  cafeIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg";

  const dollarIcon = document.createElement("img");

  dollarIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg";

  const busIcon = document.createElement("img");

  busIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg";

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    title: "Cafe",
    icon: cafeIcon.src,
  });
  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    title: "Bank",
    icon: dollarIcon.src,
  });
  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    title: "Bus Stop",
    icon: busIcon.src,
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView(); // TODO fix type
  panorama.setPosition(astorPlace);
  panorama.setPov(
    /** @type {google.maps.StreetViewPov} */ {
      heading: 265,
      pitch: 0,
    },
  );
}

function toggleStreetView() {
  const toggle = panorama.getVisible();

  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

window.initMap = initMap;
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;
}

#floating-panel {
  margin-left: -100px;
}
style.css

<html>
  <head>
    <title>Overlays Within Street View</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="floating-panel">
      <input type="button" value="Toggle Street View" id="toggle" />
    </div>
    <div id="map"></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&libraries=marker&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Eventi di Street View

Quando ti sposti tra Street View o ne modifichi le impostazioni orientato al cliente, potresti voler monitorare diversi eventi che indicano modifiche allo stato di StreetViewPanorama:

• pano_changed si attiva ogni volta che viene eseguito il singolo panorama Modifiche agli ID. Questo evento non garantisce che eventuali dati associati in anche la panoramica (come i link) è cambiata quando questo evento viene attivato; questo evento indica solo che una panoramica L'ID è cambiato. Nota che l'ID della panoramica (che puoi utilizzare come riferimento questa panoramica) è stabile solo all'interno della sessione del browser corrente.
• position_changed si attiva ogni volta che la parte sottostante La posizione (LatLng) della panoramica cambia. Rotante questo evento non verrà attivato da una panoramica. Tieni presente che puoi modificare la posizione sottostante di una panoramica senza modificare i relativi panoramica, poiché l'API assocerà automaticamente il più vicino ID panorama alla posizione della panoramica.
• pov_changed si attiva ogni volta che l'immagine StreetViewPov modifiche. Tieni presente che questo evento potrebbe attivarsi mentre la posizione e l'ID del panorama restano stabili.
• links_changed si attiva ogni volta che l'immagine i link cambiano. Tieni presente che questo evento può attivarsi in modo asincrono dopo modifica nell'ID del panorama indicato in pano_changed.
• visible_changed si attiva ogni volta che l'immagine modifiche alla visibilità. Tieni presente che questo evento può attivarsi in modo asincrono dopo modifica nell'ID del panorama indicato in pano_changed.

Il codice seguente illustra come possono essere gestiti questi eventi per raccogliere dati relativi a StreetViewPanorama sottostante:

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

Controlli di Street View

Quando mostri StreetViewPanorama, viene visualizzata una serie vengono visualizzati sulla panoramica per impostazione predefinita. Puoi attivare o disattivare questi controlli impostando i campi appropriati all'interno StreetViewPanoramaOptions a true o false:

• L'elemento panControl offre un modo per ruotare panoramica. Questo controllo viene visualizzato per impostazione predefinita come bussola integrata standard e panoramica. Puoi modificare la posizione del controllo fornendo PanControlOptions nel panControlOptions.
• Un'zoomControl fornisce un modo per eseguire lo zoom nell'immagine. Questo viene visualizzato per impostazione predefinita in basso a destra nella panoramica. Puoi modificare l'aspetto del controllo fornendo ZoomControlOptions nel zoomControlOptions.
• Un addressControl fornisce un overlay testuale che indica l'indirizzo della località associata e offre un link per aprire posizione in Google Maps. Puoi modificare l'aspetto del controllo fornendo StreetViewAddressControlOptions nel addressControlOptions.
• Un fullscreenControl offre la possibilità di aprire Street View in modalità a schermo intero. Puoi modificare l'aspetto del controllo fornendo FullscreenControlOptions nel fullscreenControlOptions.
• Un motionTrackingControl offre la possibilità di attivare o Disattivazione del rilevamento del movimento sui dispositivi mobili. Questo controllo viene visualizzato solo sui dispositivi che supportano eventi di orientamento del dispositivo. Per impostazione predefinita, viene visualizzato in basso a destra nella panoramica. Puoi modificare il valore fornendo MotionTrackingControlOptions. Per ulteriori informazioni, consulta la sezione sui mossi il monitoraggio delle conversioni.
• Una linksControl fornisce frecce guida sull'immagine per per spostarsi verso immagini panoramiche adiacenti.
• Un controllo Chiudi consente all'utente di chiudere il visualizzatore di Street View. Puoi attivare o disattivare l'impostazione Chiudi tramite Da enableCloseButton a true o false.

L'esempio seguente modifica i controlli visualizzati all'interno dei campi associati Street View e rimuove i relativi link:

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map") as HTMLElement,
    {
      position: { lat: 42.345573, lng: -71.098326 },
      addressControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER,
      },
      linksControl: false,
      panControl: false,
      enableCloseButton: false,
    }
  );
}

declare global {
  interface Window {
    initPano: () => void;
  }
}
window.initPano = initPano;
index.ts

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map"),
    {
      position: { lat: 42.345573, lng: -71.098326 },
      addressControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER,
      },
      linksControl: false,
      panControl: false,
      enableCloseButton: false,
    },
  );
}

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;
}
style.css

<html>
  <head>
    <title>Street View Controls</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></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

Accesso diretto ai dati di Street View

Ti consigliamo di determinare in modo programmatico la disponibilità dati di Street View o informazioni su panoramiche particolari senza richiedere la manipolazione diretta di una mappa o una panoramica. Puoi farlo utilizzando l'oggetto StreetViewService, che fornisce con i dati memorizzati nel servizio Street View di Google.

Richieste al servizio Street View

L'accesso al servizio Street View è asincrono, poiché l'API di Google Maps deve effettuare una chiamata a un server esterno. Per questo motivo, devi passare un metodo di callback da eseguire al completamento della richiesta. Questo di callback elabora il risultato.

Puoi avviare richieste a StreetViewService utilizzando StreetViewPanoRequest o StreetViewLocationRequest.

Una richiesta che utilizza StreetViewPanoRequest restituisce il panorama dati a cui è assegnato un ID di riferimento che identifica in modo univoco la panoramica. Tieni presente che questi ID di riferimento sono stabili solo per tutta la durata delle immagini corrispondenti panoramica.

Una richiesta che utilizza StreetViewLocationRequest ricerche per dati della panoramica in una località specificata, utilizzando i seguenti parametri:

• location specifica la posizione (latitudine e longitudine) da cercare un panorama.
• preference imposta una preferenza per la panoramica da trovare all'interno raggio: quella più vicina alla località fornita o quella migliore all'interno del raggio.
• radius imposta un raggio, specificato in metri, entro il quale cercare un panorama centrata sulla latitudine e sulla longitudine specificate. Se non specificato, il valore predefinito è 50.
• source specifica l'origine dei panorami da cercare. I valori validi sono:
  • default utilizza le origini predefinite per Street View; le ricerche non si limitano a fonti specifiche.
  • outdoor limita le ricerche alle raccolte di contenuti all'aperto. Tieni presente che le panoramiche di esterni potrebbero non esistere per la posizione specificata.

Risposte del servizio Street View

La funzione getPanorama() necessita di una funzione callback da eseguire al recupero di un risultato dal servizio Street View. Questa funzione di callback restituisce un insieme dati della panoramica all'interno di un oggetto StreetViewPanoramaData e un Codice StreetViewStatus che indica lo stato della richiesta, in tale ordine.

Una specifica dell'oggetto StreetViewPanoramaData contiene Metadati relativi a una panoramica di Street View del seguente formato:

{
  "location": {
    "latLng": LatLng,
    "description": string,
    "pano": string
  },
  "copyright": string,
  "links": [{
      "heading": number,
      "description": string,
      "pano": string,
      "roadColor": string,
      "roadOpacity": number
    }],
  "tiles": {
    "worldSize": Size,
    "tileSize": Size,
    "centerHeading": number
  }
}

Tieni presente che questo oggetto dati non è un StreetViewPanorama dell'oggetto stesso. Per creare un oggetto Street View utilizzando questi dati, devi devi creare un StreetViewPanorama e chiamare setPano(), trasmettendogli l'ID come indicato nella location.pano.

Il codice status può restituire uno dei seguenti valori:

• OK indica che il servizio ha trovato una corrispondenza panoramica.
• ZERO_RESULTS indica che il servizio non è riuscito a trovare un panoramica corrispondente ai criteri superati.
• UNKNOWN_ERROR indica che è stata inviata una richiesta per Street View non è stato elaborato, anche se il motivo esatto è sconosciuto.

Il seguente codice crea un StreetViewService che risponde ai clic degli utenti su una mappa creando indicatori che, quando selezionato, visualizzi una percentuale pari a StreetViewPanorama in ogni località. Il codice utilizza i contenuti di StreetViewPanoramaData restituito dal servizio.

/*
 * Click the map to set a new location for the Street View camera.
 */

let map: google.maps.Map;

let panorama: google.maps.StreetViewPanorama;

function initMap(): void {
  const berkeley = { lat: 37.869085, lng: -122.254775 };
  const sv = new google.maps.StreetViewService();

  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano") as HTMLElement
  );

  // Set up the map.
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: berkeley,
    zoom: 16,
    streetViewControl: false,
  });

  // Set the initial Street View camera to the center of the map
  sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanorama will return the nearest pano when the given
  // radius is 50 meters or less.
  map.addListener("click", (event) => {
    sv.getPanorama({ location: event.latLng, radius: 50 })
      .then(processSVData)
      .catch((e) =>
        console.error("Street View data not found for this location.")
      );
  });
}

function processSVData({ data }: google.maps.StreetViewResponse) {
  const location = data.location!;

  const marker = new google.maps.Marker({
    position: location.latLng,
    map,
    title: location.description,
  });

  panorama.setPano(location.pano as string);
  panorama.setPov({
    heading: 270,
    pitch: 0,
  });
  panorama.setVisible(true);

  marker.addListener("click", () => {
    const markerPanoID = location.pano;

    // Set the Pano to use the passed panoID.
    panorama.setPano(markerPanoID as string);
    panorama.setPov({
      heading: 270,
      pitch: 0,
    });
    panorama.setVisible(true);
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

/*
 * Click the map to set a new location for the Street View camera.
 */
let map;
let panorama;

function initMap() {
  const berkeley = { lat: 37.869085, lng: -122.254775 };
  const sv = new google.maps.StreetViewService();

  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
  );
  // Set up the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: berkeley,
    zoom: 16,
    streetViewControl: false,
  });
  // Set the initial Street View camera to the center of the map
  sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);
  // Look for a nearby Street View panorama when the map is clicked.
  // getPanorama will return the nearest pano when the given
  // radius is 50 meters or less.
  map.addListener("click", (event) => {
    sv.getPanorama({ location: event.latLng, radius: 50 })
      .then(processSVData)
      .catch((e) =>
        console.error("Street View data not found for this location."),
      );
  });
}

function processSVData({ data }) {
  const location = data.location;
  const marker = new google.maps.Marker({
    position: location.latLng,
    map,
    title: location.description,
  });

  panorama.setPano(location.pano);
  panorama.setPov({
    heading: 270,
    pitch: 0,
  });
  panorama.setVisible(true);
  marker.addListener("click", () => {
    const markerPanoID = location.pano;

    // Set the Pano to use the passed panoID.
    panorama.setPano(markerPanoID);
    panorama.setPov({
      heading: 270,
      pitch: 0,
    });
    panorama.setVisible(true);
  });
}

window.initMap = initMap;
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;
}
style.css

<html>
  <head>
    <title>Directly Accessing Street View Data</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map" style="width: 45%; height: 100%; float: left"></div>
    <div id="pano" style="width: 45%; height: 100%; float: left"></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

Fornire panoramiche personalizzate di Street View

L'API Maps JavaScript supporta la visualizzazione di panoramiche personalizzate. all'interno dell'oggetto StreetViewPanorama. Con le impostazioni personalizzate, panoramiche, puoi visualizzare gli interni di edifici, viste luoghi panoramici o qualsiasi altra cosa dalla tua immaginazione. Puoi anche collega queste panoramiche personalizzate all'immagine Street View esistente di Google panoramiche.

La configurazione di una serie di immagini panoramiche personalizzate implica la seguenti passaggi:

• Crea un'immagine panoramica di base per ogni panoramica personalizzata. Questo l'immagine di base deve avere la risoluzione massima con cui vuoi pubblicare immagini con zoom.
• (Facoltativo, ma consigliato) Creare un insieme di riquadri panoramici a livelli di zoom diversi rispetto all'immagine di base.
• Crea collegamenti tra i panorami personalizzati.
• (Facoltativo) Specificare "voce" panoramiche all'interno Immagini di Street View esistenti di Google e personalizzazione dei link da/verso l'insieme personalizzato al set standard.
• Definisci i metadati per ogni immagine panoramica all'interno di un oggetto StreetViewPanoramaData.
• Implementare un metodo che determina la panoramica personalizzata e designare tale metodo come gestore personalizzato all'interno dell'oggetto StreetViewPanorama.

La procedura è descritta nelle sezioni seguenti.

Creazione di panoramiche personalizzate

Ogni panoramica di Street View è un'immagine o un insieme di immagini che offre una visione completa a 360° da un'unica posizione. L'oggetto StreetViewPanorama utilizza immagini conformi all'equirettangolare (tavola Carrée). Una tale proiezione contiene 360 gradi orizzontale (tutto) e una visuale di 180 gradi di vista verticale (da dritto a verticale). Questi campi di visualizzazione generano un'immagine con proporzioni di 2:1. R di seguito è mostrata una panoramica a tutto tondo.

Le immagini panoramiche si ottengono in genere scattando più le foto da una posizione e unendole insieme utilizzando software per panoramiche. (Vedi la sezione Confronto tra applicazioni di stitching delle foto per ulteriori informazioni. Queste immagini devono condividere una sola "fotocamera" locus da cui vengono acquisite tutte le immagini panoramiche. La panoramica a 360° risultante può quindi definire una proiezione una sfera con l'immagine avvolta sulla superficie bidimensionale della sfera.

Rappresentazione del panorama come una proiezione su una sfera rettilinea è vantaggioso quando si divide l'immagine in riquadri rettilinei e la pubblicazione di immagini in base ai riquadri calcolati coordinate.

Creazione di riquadri del panorama personalizzati

Street View supporta inoltre diversi livelli di dettaglio delle immagini tramite l'uso di un controllo zoom, che consente di aumentare e diminuire lo zoom visualizzazione predefinita. In genere, Street View offre cinque livelli di risoluzione di zoom per qualsiasi immagine panoramica. Se dovessi fare affidamento su un'unica immagine panoramica per mostrare tutti i livelli di zoom, ad esempio un'immagine sarebbe necessariamente molto grande e rallenterà significativamente l'applicazione o avere una risoluzione così scarsa a livelli di zoom più elevati pubblicare un'immagine pixellata male. Per fortuna, però, possiamo utilizzare un pattern di progettazione simile usato Riquadri delle mappe di Google a diversi livelli di zoom per fornire immagini con risoluzione appropriata per le panoramiche a ciascun livello di zoom.

Al primo caricamento di StreetViewPanorama, per impostazione predefinita mostra un'immagine composta per il 25% (90 gradi d'arco) della ampiezza orizzontale della panoramica con livello di zoom 1. Questa visualizzazione corrisponde più o meno a un normale campo visivo umano. Zoom "fuori" da questa vista predefinita offre essenzialmente un arco più ampio, mentre aumenti lo zoom restringe il campo di una vista a un arco più piccolo. La StreetViewPanorama calcola automaticamente campo visivo appropriato per il livello di zoom selezionato, quindi seleziona le immagini più appropriate per quella risoluzione selezionando un insieme di riquadri che corrisponde approssimativamente alle dimensioni della e il campo visivo più ampio. I seguenti campi di visualizzazione mappano a Street View livelli di zoom:

Tieni presente che le dimensioni dell'immagine mostrata in Street View sono dipende completamente dalle dimensioni dello schermo (larghezza) containerizzato. Se fornisci un container più grande, il servizio continuerà a fornire lo stesso campo visivo per qualsiasi livello di zoom, sebbene sia possibile selezionare riquadri più appropriati per quella risoluzione.

Poiché ogni panorama consiste in una proiezione equirettangolare, creare riquadri panoramiche è relativamente facile. Poiché la proiezione fornisce un'immagine con proporzioni 2:1, riquadri con proporzioni 2:1 sono più facili da usare, anche se i riquadri quadrati possono offrire prestazioni migliori su mappe quadrate (poiché il campo visivo è quadrato).

Per i riquadri 2:1, una singola immagine che comprende l'intero panorama rappresenta l'intero panorama "mondo" (l'immagine di base) con lo zoom livello 0, e ogni livello di zoom aumenta 4 riquadri ^zoomLevel. (ad es. livello di zoom 2, l'intera panoramica è composta da 16 riquadri.) Nota : livelli di zoom in Street View non corrispondono direttamente ai livelli di zoom come forniti utilizzando il controllo Street View; viene usato lo zoom di Street View selezionare un campo visivo (FoV) da cui i riquadri sono selezionati.

In genere, è consigliabile assegnare un nome ai riquadri di immagini in modo che in modo programmatico. Questo schema di denominazione discussi di seguito in Gestione di segmenti Richieste di Panorama.

Gestione delle richieste di panoramiche personalizzate

Per utilizzare un panorama personalizzato, richiama StreetViewPanorama.registerPanoProvider(), che specifica il nome del metodo del provider di panorama personalizzato. Il fornitore di panoramiche deve restituire un oggetto StreetViewPanoramaData e ha seguente firma:

Function(pano):StreetViewPanoramaData

Un StreetViewPanoramaData è un oggetto dei seguenti modulo:

{
  copyright: string,
  location: {
    description: string,
    latLng: google.maps.LatLng,
    pano: string
  },
  tiles: {
    tileSize: google.maps.Size,
    worldSize: google.maps.Size,
    heading: number,
    getTileUrl: Function
  },
  links: [
    description: string,
    heading: number,
    pano: string,
    roadColor: string,
    roadOpacity: number
  ]
}

Visualizza una panoramica personalizzata come segue:

• Imposta il parametro StreetViewPanoramaOptions.pano in un valore personalizzato.
• Chiama StreetViewPanorama.registerPanoProvider() per fornire una funzione fornitore panoramica personalizzata.
• Implementa la funzione del fornitore del panorama personalizzato per gestire le valore pano specificato.
• Costruire un StreetViewPanoramaData .
• Imposta il parametro StreetViewTileData.getTileUrl al nome di una funzione di provider di riquadri personalizzati da te fornita. Per ad esempio getCustomPanoramaTileUrl.
• Implementare la funzione di provider di riquadri personalizzati, come mostrato negli esempi di seguito.
• Restituisci l'oggetto StreetViewPanoramaData.

Nota: non impostare direttamente un position su StreetViewPanorama quando vuoi visualizzare panoramiche personalizzate, come questa posizione indicherà a Street Visualizza il servizio per richiedere la chiusura delle immagini predefinite di Street View in quella posizione. Imposta questa posizione all'interno oggetto StreetViewPanoramaData personalizzato location.latLng.

L'esempio seguente mostra una panoramica personalizzata della Sydney ufficio. Tieni presente che questo esempio non utilizza una mappa o contenuti Street View predefiniti immagini:

function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map") as HTMLElement,
    { pano: "reception", visible: true }
  );

  panorama.registerPanoProvider(getCustomPanorama);
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(
  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"
  );
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano: string): google.maps.StreetViewPanoramaData {
  if (pano === "reception") {
    return {
      location: {
        pano: "reception",
        description: "Google Sydney - Reception",
      },
      links: [],
      // The text for the copyright control.
      copyright: "Imagery (c) 2010 Google",
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(2048, 1024),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl,
      },
    };
  }
  // @ts-ignore TODO fix typings
  return null;
}

declare global {
  interface Window {
    initPano: () => void;
  }
}
window.initPano = initPano;
index.ts

function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map"),
    { pano: "reception", visible: true },
  );

  panorama.registerPanoProvider(getCustomPanorama);
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  return (
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
    "panoReception1024-" +
    zoom +
    "-" +
    tileX +
    "-" +
    tileY +
    ".jpg"
  );
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano) {
  if (pano === "reception") {
    return {
      location: {
        pano: "reception",
        description: "Google Sydney - Reception",
      },
      links: [],
      // The text for the copyright control.
      copyright: "Imagery (c) 2010 Google",
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(2048, 1024),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl,
      },
    };
  }
  // @ts-ignore TODO fix typings
  return null;
}

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;
}
style.css

<html>
  <head>
    <title>Custom Street View Panoramas</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></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

Il fornitore di panoramiche personalizzate restituisce il riquadro appropriato una data l'ID panorama trasmesso, il livello di zoom e le coordinate del riquadro della panoramica. Poiché la selezione delle immagini dipende da questi valori passati, è utile assegnare un nome alle immagini che possono essere selezionate in modo programmatico i valori passati, come pano_zoom_tileX_tileY.png.

Nell'esempio seguente viene aggiunta un'altra freccia all'immagine, oltre alla frecce di navigazione predefinite in Street View che puntano verso Google Sydney e i link alle immagini personalizzate:

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