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 predefinito0
) 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:
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> <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>
Prova Sample
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):
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
.
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); 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;
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); 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;
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> <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>
Prova Sample
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'immagineStreetViewPov
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 inpano_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 inpano_changed
.
Il codice seguente illustra come possono essere gestiti questi eventi
per raccogliere dati relativi a 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> <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"> </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"> </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>
Prova Sample
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 fornendoPanControlOptions
nelpanControlOptions
. - 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 fornendoZoomControlOptions
nelzoomControlOptions
. - 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 fornendoStreetViewAddressControlOptions
neladdressControlOptions
. - Un
fullscreenControl
offre la possibilità di aprire Street View in modalità a schermo intero. Puoi modificare l'aspetto del controllo fornendoFullscreenControlOptions
nelfullscreenControlOptions
. - 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 fornendoMotionTrackingControlOptions
. 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
atrue
ofalse
.
L'esempio seguente modifica i controlli visualizzati all'interno dei campi associati Street View e rimuove i relativi link:
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> <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>
Prova Sample
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.
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> <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>
Prova Sample
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:
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 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 esempiogetCustomPanoramaTileUrl
. - 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:
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> <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>
Prova Sample
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:
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", // 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;
CSS
html, body { height: 100%; margin: 0; padding: 0; } #street-view { height: 100%; }
HTML
<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>