Servizio Street View

Panoramica

Seleziona la piattaforma: Android iOS JavaScript

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

Di seguito è riportata un'immagine di esempio di Street View.


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

Utilizzo della mappa di Street View

Sebbene Street View possa essere utilizzato all'interno di un elemento DOM autonomo, è utile soprattutto per indicare una posizione su una mappa. Per impostazione predefinita, Street View è abilitato sulla mappa e viene visualizzato un controllo Pegman di Street View integrato nei controlli di navigazione (zoom e panoramica). Puoi nascondere questo controllo all'interno del campo MapOptions della mappa impostando streetViewControl su false. Puoi anche modificare la posizione predefinita del controllo Street View impostando la proprietà streetViewControlOptions.position di Map sul nuovo ControlPosition.

Il controllo Pegman di Street View ti consente di visualizzare panoramiche di Street View direttamente all'interno della mappa. Quando l'utente fa clic su Pegman e lo trattiene, la mappa si aggiorna mostrando i contorni blu intorno alle strade abilitate per Street View, offrendo un'esperienza utente simile a quella dell'app Google Maps.

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

Panorami di Street View

Le immagini di Street View sono supportate tramite l'uso dell'oggetto StreetViewPanorama, che fornisce un'interfaccia API a un "visualizzatore" di Street View. Ogni mappa contiene una panoramica Street View predefinita, che puoi recuperare richiamando il metodo getStreetView() della mappa. Quando aggiungi un controllo Street View alla mappa impostando l'opzione streetViewControl su true, il controllo Pegman viene collegato automaticamente alla panoramica predefinita di Street View.

Puoi anche creare un oggetto StreetViewPanorama e impostare la mappa in modo che lo utilizzi al posto di quello predefinito, impostando in modo esplicito la proprietà streetView della mappa sull'oggetto creato. Se vuoi modificare il comportamento predefinito, ad esempio la condivisione automatica degli overlay tra la mappa e la panoramica, puoi sostituire la panoramica predefinita. Consulta la sezione Sovrapposizioni in Street View di seguito.

Contenitori Street View

Potresti voler visualizzare invece un elemento StreetViewPanorama all'interno di un elemento DOM separato, spesso un elemento <div>. È sufficiente passare l'elemento DOM all'interno del costruttore di StreetViewPanorama. Per ottimizzare la visualizzazione delle immagini, consigliamo una dimensione minima di 200 x 200 pixel.

Nota: sebbene la funzionalità Street View sia progettata per essere utilizzata insieme a una mappa, questo utilizzo non è obbligatorio. Puoi utilizzare un oggetto Street View autonomo senza una mappa.

Posizioni e punto di vista (POV) di Street View

Il costruttore StreetViewPanorama consente inoltre di impostare la località e il punto di vista di Street View utilizzando il parametro StreetViewOptions. Puoi chiamare setPosition() e setPov() sull'oggetto dopo i lavori per cambiarne la posizione e il punto di vista.

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

  • heading (valore predefinito 0) definisce l'angolo di rotazione intorno al luogo della fotocamera in gradi relativi dal nord vero. Le intestazioni sono misurate in senso orario (90 gradi è vero est).
  • pitch (valore predefinito 0) definisce la varianza dell'angolo in alto o in basso rispetto all'inclinazione predefinita iniziale della fotocamera, che è spesso (ma non sempre) orizzontale. Ad esempio, un'immagine scattata su una collina probabilmente mostrerà una angolazione predefinita non orizzontale. Gli angoli di inclinazione vengono misurati con valori positivi rivolti verso l'alto (fino a +90 gradi verso l'alto e ortogonali rispetto al tono predefinito) e valori negativi verso il basso (fino a -90 gradi verso il basso e ortogonali rispetto al tono predefinito).

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

Il codice seguente mostra una mappa di Boston con una vista iniziale del Fenway Park. Selezionando il Pegman e trascinandolo in una posizione supportata sulla mappa, la panoramica di Street View verrà modificata:

TypeScript

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;

JavaScript

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;

CSS

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

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

HTML

<html>
  <head>
    <title>Street View split-map-panes</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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>
Visualizza esempio

Prova Samples

Rilevamento dei movimenti sui dispositivi mobili

Sui dispositivi che supportano gli eventi di orientamento del dispositivo, l'API offre agli utenti la possibilità di modificare il punto di vista di Street View in base al movimento del dispositivo. Gli utenti possono guardarsi intorno spostando i dispositivi. Questo è chiamato monitoraggio del movimento o della 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 rilevamento del movimento è attivo su tutti i dispositivi che lo supportano. Il seguente esempio disabilita 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 del rilevamento del movimento. Per impostazione predefinita, il controllo viene mostrato sui dispositivi che supportano il rilevamento del movimento. L'utente può toccare il controllo per attivare o disattivare il rilevamento del movimento. Tieni presente che il controllo non viene mai visualizzato se il dispositivo non supporta il rilevamento del movimento, indipendentemente dal valore di motionTrackingControl.

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

    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 del rilevamento del movimento. Per impostazione predefinita, il controllo viene visualizzato in basso a destra nella panoramica (posizione RIGHT_BOTTOM). Il seguente esempio imposta la posizione del 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 (o su qualsiasi dispositivo che supporti gli eventi di orientamento del dispositivo):


Visualizza esempio

Sovrapposizioni in Street View

L'oggetto StreetViewPanorama predefinito supporta la visualizzazione nativa degli sovrapposizioni delle mappe. In genere gli overlay vengono visualizzati a "livello stradale" ancorati in LatLng posizioni. Ad esempio, gli indicatori vengono visualizzati con la coda ancorata al piano orizzontale della località, ad esempio nella panoramica di Street View.

Attualmente, i tipi di overlay supportati nelle panoramiche di Street View sono limitati a Marker, InfoWindow e OverlayView personalizzate. Gli overlay che visualizzi su una mappa possono essere visualizzati in una panoramica di Street View trattando la panoramica come un sostituto dell'oggetto Map, richiamando setMap() e passando StreetViewPanorama come un argomento anziché come mappa. Le finestre informative in modo simile possono essere aperte all'interno di una panoramica di Street View chiamando open(), passando il StreetViewPanorama() invece di una mappa.

Inoltre, quando crei una mappa con un valore StreetViewPanorama predefinito, qualsiasi indicatore creato su una mappa viene condiviso automaticamente con la panoramica Street View associata alla mappa, a condizione che la panoramica sia visibile. Per recuperare la panoramica predefinita di Street View, chiama getStreetView() sull'oggetto Map. Tieni presente che se imposti esplicitamente la proprietà streetView della mappa su un valore StreetViewPanorama della tua costruzione, sovrascriverai la panoramica predefinita.

L'esempio seguente mostra indicatori che indicano varie località nei pressi di Astor Place, New York. Attiva/disattiva la visualizzazione Street View per mostrare gli indicatori condivisi visualizzati all'interno di StreetViewPanorama.

TypeScript

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);

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",
    title: "Cafe",
  });

  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",
    title: "Bank",
  });

  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00",
    title: "Bus Stop",
  });

  // 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;

JavaScript

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);

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",
    title: "Cafe",
  });
  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",
    title: "Bank",
  });
  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00",
    title: "Bus Stop",
  });

  // 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;

CSS

/* 
 * 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;
}

HTML

<html>
  <head>
    <title>Overlays Within Street View</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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>
Visualizza esempio

Prova Samples

Eventi di Street View

Quando ti sposti tra Street View o ne modifichi l'orientamento, potresti voler monitorare diversi eventi che indicano variazioni dello stato di StreetViewPanorama:

  • pano_changed si attiva ogni volta che il singolo ID panorama cambia. Questo evento non garantisce che anche i dati associati all'interno della panoramica (come i link) siano cambiati al momento dell'attivazione dell'evento; questo evento indica solo che l'ID di un panorama è cambiato. Tieni presente che l'ID panorama (che puoi utilizzare per fare riferimento a questa panoramica) è stabile solo nella sessione del browser corrente.
  • position_changed si attiva ogni volta che la posizione sottostante (LatLng) della panoramica cambia. Questo evento non viene attivato dalla rotazione di una panoramica. Tieni presente che puoi modificare la posizione sottostante di una panoramica senza modificare l'ID del panorama associato, poiché l'API assocerà automaticamente l'ID del panorama più vicino alla posizione della panoramica.
  • pov_changed si attiva ogni volta che il valore StreetViewPov di Street View cambia. Tieni presente che questo evento potrebbe attivarsi, mentre la posizione e l'ID panorama rimangono stabili.
  • links_changed si attiva ogni volta che i link di Street View cambiano. Tieni presente che questo evento potrebbe attivarsi in modo asincrono dopo una modifica dell'ID panorama indicato tramite pano_changed.
  • visible_changed si attiva ogni volta che la visibilità di Street View cambia. Tieni presente che questo evento potrebbe attivarsi in modo asincrono dopo una modifica dell'ID panorama indicato tramite pano_changed.

Il codice seguente illustra come possono essere gestiti questi eventi per raccogliere dati sull'elemento StreetViewPanorama sottostante:

TypeScript

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;

JavaScript

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;

CSS

/* 
 * 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;
}

HTML

<html>
  <head>
    <title>Street View Events</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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>
Visualizza esempio

Prova Samples

Controlli di Street View

Quando viene visualizzato un StreetViewPanorama, sulla panoramica viene visualizzata per impostazione predefinita una serie di controlli. Puoi attivare o disattivare questi controlli impostando i campi appropriati all'interno di StreetViewPanoramaOptions su true o false:

  • Un panControl fornisce un modo per ruotare la panoramica. Questo controllo viene visualizzato per impostazione predefinita come controllo standard integrato per la bussola e la panoramica. Puoi modificare la posizione del controllo specificando PanControlOptions nel campo panControlOptions.
  • Un zoomControl fornisce un modo per eseguire lo zoom all'interno dell'immagine. Per impostazione predefinita, questo controllo viene visualizzato in basso a destra nella panoramica. Puoi modificare l'aspetto del controllo specificando ZoomControlOptions nel campo zoomControlOptions.
  • Un addressControl fornisce un overlay di testo che indica l'indirizzo della località associata e offre un link per aprire la sede in Google Maps. Puoi modificare l'aspetto del controllo specificando StreetViewAddressControlOptions nel campo addressControlOptions.
  • Un fullscreenControl offre la possibilità di aprire Street View in modalità a schermo intero. Puoi modificare l'aspetto del controllo specificando FullscreenControlOptions nel campo fullscreenControlOptions.
  • Un motionTrackingControl offre la possibilità di attivare o disattivare il rilevamento del movimento sui dispositivi mobili. Questo controllo viene visualizzato solo sui dispositivi che supportano gli eventi di orientamento. Per impostazione predefinita, il controllo viene visualizzato in basso a destra nella panoramica. Puoi modificare la posizione del controllo specificando MotionTrackingControlOptions. Per ulteriori informazioni, consulta la sezione relativa al monitoraggio del movimento.
  • Un linksControl fornisce frecce guida sull'immagine per spostarsi verso le immagini panoramiche adiacenti.
  • Il controllo Chiudi consente all'utente di chiudere il visualizzatore di Street View. Puoi abilitare o disabilitare il controllo Chiudi impostando enableCloseButton su true o false.

L'esempio seguente modifica i controlli mostrati all'interno dell'elemento Street View associato e rimuove i link della vista:

TypeScript

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;

JavaScript

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;

CSS

/* 
 * 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;
}

HTML

<html>
  <head>
    <title>Street View Controls</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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>
Visualizza esempio

Prova Samples

Accesso diretto ai dati di Street View

Puoi determinare in modo programmatico la disponibilità dei dati di Street View o restituire informazioni su particolari panoramiche senza richiedere la manipolazione diretta di una mappa o di una panoramica. A tale scopo, puoi utilizzare l'oggetto StreetViewService, che fornisce un'interfaccia per 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 metodo di callback elabora il risultato.

Puoi avviare richieste a StreetViewService utilizzando StreetViewPanoRequest o StreetViewLocationRequest.

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

Una richiesta che utilizza StreetViewLocationRequest cerca i dati di panorama in una posizione specificata, utilizzando i seguenti parametri:

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

Risposte del servizio Street View

La funzione getPanorama() richiede l'esecuzione di una funzione callback al momento del recupero di un risultato dal servizio Street View. Questa funzione di callback restituisce un set di dati del panorama all'interno di un oggetto StreetViewPanoramaData e un codice StreetViewStatus che indica lo stato della richiesta, in questo ordine.

Una specifica dell'oggetto StreetViewPanoramaData contiene metadati relativi a una panoramica di Street View nel 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 oggetto StreetViewPanorama. Per creare un oggetto Street View utilizzando questi dati, devi creare un elemento StreetViewPanorama e chiamare setPano(), passando l'ID come indicato nel campo location.pano restituito.

Il codice status potrebbe restituire uno dei seguenti valori:

  • OK indica che il servizio ha trovato un panorama corrispondente.
  • ZERO_RESULTS indica che il servizio non è riuscito a trovare un panorama corrispondente con i criteri superati.
  • UNKNOWN_ERROR indica che non è stato possibile elaborare una richiesta Street View, anche se il motivo esatto è sconosciuto.

Il seguente codice crea un StreetViewService che risponde ai clic degli utenti su una mappa creando indicatori che, se selezionati, mostrano una StreetViewPanorama di quella località. Il codice utilizza i contenuti di StreetViewPanoramaData restituiti dal servizio.

TypeScript

/*
 * 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;

JavaScript

/*
 * 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;

CSS

/* 
 * 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;
}

HTML

<html>
  <head>
    <title>Directly Accessing Street View Data</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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>
Visualizza esempio

Prova Samples

Fornire panoramiche di Street View personalizzate

L'API Maps JavaScript supporta la visualizzazione di panoramiche personalizzate all'interno dell'oggetto StreetViewPanorama. Utilizzando le panoramiche personalizzate, puoi mostrare l'interno degli edifici, viste da località panoramiche o qualsiasi cosa della tua immaginazione. Puoi anche collegare queste panoramiche personalizzate alle panoramiche Street View esistenti di Google.

La configurazione di una serie di immagini panoramiche personalizzate prevede i seguenti passaggi:

  • Crea un'immagine panoramica di base per ogni panoramica personalizzata. Questa immagine di base deve essere alla massima risoluzione con la quale vuoi pubblicare immagini ingrandite.
  • (Facoltativo, ma consigliato) Crea un insieme di riquadri panoramici a livelli di zoom diversi dall'immagine di base.
  • Crea collegamenti tra le panoramiche personalizzate.
  • (Facoltativo) Specifica le panoramiche di "entrata" nelle immagini di Street View esistenti di Google e personalizza i link a/da il set personalizzato a quello standard.
  • Definisci i metadati per ogni immagine panoramica all'interno di un oggetto StreetViewPanoramaData.
  • Implementa un metodo che stabilisca i dati e le immagini del panorama personalizzato e designalo come gestore personalizzato all'interno dell'oggetto StreetViewPanorama.

La procedura viene spiegata nelle sezioni seguenti.

Creazione di panoramiche personalizzate

Ogni panoramica di Street View è un'immagine o un insieme di immagini che forniscono una visione completa a 360 gradi da una singola posizione. L'oggetto StreetViewPanorama utilizza immagini conformi alla proiezione equirettangolare (Plate Carrée). Tale proiezione contiene una vista orizzontale a 360 gradi (tutto a 360 gradi) e 180 gradi di visualizzazione verticale (da un punto di vista dritto verso il basso). Questi campi di visualizzazione generano un'immagine con proporzioni di 2:1. Di seguito è mostrata una panoramica completa a tutto tondo.

Vista panoramica di una strada cittadina

Le immagini panoramiche si ottengono in genere scattando più foto da una sola posizione e unendole tra loro utilizzando un software per la panoramica. Per ulteriori informazioni, consulta la pagina Confronto delle applicazioni di unione delle foto di Wikipedia Queste immagini devono condividere un unico luogo "fotocamera", da cui viene acquisita ciascuna delle immagini panoramiche. La risultante panoramica a 360 gradi può quindi definire una proiezione su una sfera con l'immagine a capo sulla superficie bidimensionale della sfera.

Sfera con vista panoramica di una strada sulla sua superficie

Trattare il panorama come una proiezione su una sfera con un sistema di coordinate rettilineo è vantaggioso quando si divide l'immagine in piastrelle rettilinei e si pubblicano immagini in base alle coordinate calcolate dei riquadri.

Creazione di riquadri di panoramiche personalizzate

Street View supporta inoltre diversi livelli di dettaglio dell'immagine grazie all'uso di un controllo di zoom, che consente di aumentare e diminuire lo zoom rispetto alla visualizzazione predefinita. In genere, Street View fornisce cinque livelli di risoluzione dello zoom per ogni immagine panoramica. Se dovessi fare affidamento su una singola immagine panoramica per tutti i livelli di zoom, un'immagine di questo tipo sarebbe necessariamente molto grande e rallenta in modo significativo l'applicazione, oppure avrà una risoluzione così scarsa a livelli di zoom più elevati da pubblicare un'immagine con pixel ridotti. Fortunatamente, tuttavia, possiamo utilizzare un pattern di progettazione simile per pubblicare riquadri della mappa di Google a diversi livelli di zoom, in modo da fornire immagini con risoluzione appropriata per le panoramiche a ogni livello di zoom.

Quando un elemento StreetViewPanorama viene caricato per la prima volta, per impostazione predefinita viene visualizzata un'immagine costituita dal 25% (90 gradi di arco) dell'ampiezza orizzontale della panoramica a livello di zoom 1. Questa visualizzazione corrisponde approssimativamente a un normale campo visivo umano. Lo zoom "all'indietro" da questa visualizzazione predefinita fornisce essenzialmente un arco più ampio, mentre lo zoom in avanti restringe il campo visivo a un arco più piccolo. L'StreetViewPanorama calcola automaticamente il campo visivo appropriato per il livello di zoom selezionato, poi seleziona le immagini più appropriate per la risoluzione selezionata selezionando un set di riquadri che corrisponde approssimativamente alle dimensioni del campo visivo orizzontale. I seguenti campi di visualizzazione mappano i livelli di zoom di Street View:

Livello di zoom di Street View Campo visivo (gradi)
0 180
1 (valore predefinito) 90
2 45
3 22.5
4 11.25

Tieni presente che le dimensioni dell'immagine mostrata in Street View dipendono completamente dalle dimensioni dello schermo (larghezza) del contenitore Street View. Se fornisci un container più grande, il servizio fornirà comunque lo stesso campo visivo per qualsiasi livello di zoom specifico, anche se potrebbe selezionare riquadri più appropriati per quella risoluzione.

Poiché ciascuna panoramica è costituita da una proiezione equirettangolare, creare riquadri di panoramiche è relativamente facile. Poiché la proiezione fornisce un'immagine con proporzioni 2:1, i riquadri con proporzioni 2:1 sono più facili da usare, sebbene i riquadri quadrati possano offrire prestazioni migliori sulle mappe quadrate (dal momento che il campo visivo sarà quadrato).

Per i riquadri 2:1, una singola immagine che comprende l'intero panorama rappresenta l'intero "mondo" della panoramica (l'immagine di base) a livello di zoom 0, con ogni livello di zoom crescente che offre 4 riquadri zoomLevel. Ad esempio, a livello di zoom 2, l'intera panoramica è composta da 16 riquadri. Nota: i livelli di zoom nei riquadri di Street View non corrispondono direttamente ai livelli di zoom forniti dal controllo Street View; i livelli di zoom del controllo Street View selezionano invece un campo visivo (FoV), dal quale vengono selezionati i riquadri appropriati.

Vista panoramica di una strada cittadina divisa in riquadri

In genere, è consigliabile assegnare un nome ai riquadri di immagini in modo che possano essere selezionati in modo programmatico. Questo schema di denominazione è discusso di seguito nella sezione Gestione delle richieste di panoramiche personalizzate.

Gestione delle richieste di panoramiche personalizzate

Per utilizzare una panoramica personalizzata, chiama StreetViewPanorama.registerPanoProvider(), specificando il nome del metodo del provider di panoramiche personalizzate. Il metodo del provider di panoramiche deve restituire un oggetto StreetViewPanoramaData e ha la seguente firma:

Function(pano):StreetViewPanoramaData

Un StreetViewPanoramaData è un oggetto con il seguente formato:

{
  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 nel seguente modo:

  • Imposta la proprietà StreetViewPanoramaOptions.pano su un valore personalizzato.
  • Chiama StreetViewPanorama.registerPanoProvider() per fornire una funzione del fornitore di panoramiche personalizzate.
  • Implementa la funzione personalizzata del fornitore del panorama in modo da gestire il valore pano specificato.
  • Crea un oggetto StreetViewPanoramaData.
  • Imposta la proprietà StreetViewTileData.getTileUrl sul nome di una funzione del fornitore di riquadri personalizzati da te indicata. Ad esempio, getCustomPanoramaTileUrl.
  • Implementa la funzione del provider di riquadri personalizzati, come mostrato negli esempi riportati di seguito.
  • Restituisci l'oggetto StreetViewPanoramaData.

Nota. Non impostare direttamente un position sulla StreetViewPanorama quando vuoi mostrare panoramiche personalizzate; una posizione di questo tipo indica al servizio Street View di richiedere le immagini di Street View predefinite vicine alla località in questione. Imposta invece questa posizione nel campo location.latLng dell'oggetto StreetViewPanoramaData personalizzato.

L'esempio seguente mostra una panoramica personalizzata della sede di Google a Sydney. Tieni presente che questo esempio non utilizza una mappa o immagini di Street View predefinite:

TypeScript

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;

JavaScript

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;

CSS

/* 
 * 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;
}

HTML

<html>
  <head>
    <title>Custom Street View Panoramas</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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>
Visualizza esempio

Prova Samples

Il fornitore della panoramica personalizzata restituisce il riquadro appropriato in base all'ID, al livello di zoom e alle coordinate del riquadro della panoramica passati. Poiché la selezione delle immagini dipende da questi valori trasmessi, è utile assegnare un nome alle immagini che possono essere selezionate in modo programmatico dati i valori trasmessi, ad esempio pano_zoom_tileX_tileY.png.

Nel seguente esempio viene aggiunta un'altra freccia all'immagine, oltre alle frecce di navigazione predefinite di Street View, che puntano a Google Sydney e rimandano alle immagini personalizzate:

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 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;

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();
    }
    // @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;

CSS

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

#street-view {
  height: 100%;
}

HTML

<html>
  <head>
    <title>Custom Street View Panorama Tiles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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>
Visualizza esempio

Prova Samples