- Introduzione
- Aggiungere una finestra informativa
- Aprire una finestra informativa
- Chiudere una finestra informativa
- Spostare una finestra informativa
Introduzione
Un elemento
InfoWindow
mostra i contenuti (generalmente testo o immagini) in
una finestra popup sopra la mappa, in un determinato luogo. La finestra informativa ha un'area dei contenuti e uno stelo rastremato. La punta dello stelo è attaccata a una posizione specificata sulla mappa. Le finestre informative vengono visualizzate come finestre di dialogo per gli screen reader.

In genere puoi associare una finestra informativa a un indicatore, ma puoi anche allegarla a una latitudine/longitudine specifica, come descritto nella sezione sull'aggiunta di una finestra informativa di seguito.
In generale, le finestre informative sono un tipo di overlay. Per informazioni su altri tipi di overlay, consulta la sezione Disegno sulla mappa.
Aggiungere una finestra informativa
Il costruttore
InfoWindow
accetta un valore letterale di oggetto
InfoWindowOptions
, che specifica i parametri iniziali per visualizzare la finestra informativa.
Il valore letterale dell'oggetto InfoWindowOptions
contiene i seguenti campi:
content
contiene una stringa di testo o un nodo DOM da visualizzare nella finestra informativa.pixelOffset
contiene un offset dalla punta della finestra informativa alla posizione in cui è ancorata. In pratica, non è necessario specificare questo campo. Puoi lasciarlo sul valore predefinito.position
contiene l'elementoLatLng
a cui è ancorata questa finestra informativa. Nota: è possibile associare un elementoInfoWindow
a un oggettoMarker
(in questo caso la sua posizione si basa sulla posizione dell'indicatore) o sulla mappa stessa in corrispondenza di un elementoLatLng
specificato. Un modo per recuperare unLatLng
è utilizzare il servizio di geocodifica. Se apri una finestra informativa su un indicatore,position
viene aggiornato automaticamente.maxWidth
specifica la larghezza massima della finestra informativa in pixel. Per impostazione predefinita, una finestra informativa si espande per adattarsi ai contenuti e esegue il wrapping automatico del testo se questa riempie la mappa. Se aggiungi unmaxWidth
, la finestra informativa si unisce automaticamente per applicare la larghezza specificata. Se raggiunge la larghezza massima e sullo schermo è presente una verticale, la finestra informativa può espandersi in verticale.
I contenuti dei InfoWindow
possono contenere una stringa di testo, uno snippet di codice HTML o un elemento DOM. Per impostare i contenuti, specificali
all'interno di InfoWindowOptions
o chiama
setContent()
in modo esplicito su InfoWindow
.
Se vuoi dimensionare esplicitamente i contenuti, puoi inserirli in un elemento <div>
e applicare uno stile a <div>
con CSS. Puoi usare CSS anche per attivare lo scorrimento. Tieni presente che se non
attivi lo scorrimento e i contenuti superano lo spazio disponibile nella finestra
informativa, potrebbero uscire dalla finestra informativa.
Apri una finestra informativa
Quando crei una finestra informativa, non viene visualizzata automaticamente sulla mappa.
Per rendere visibile la finestra informativa, devi chiamare il metodo open()
su InfoWindow
, trasmettendo un valore letterale dell'oggetto InfoWindowOpenOptions
specificando le seguenti opzioni:
map
specifica la mappa o il panorama di Street View su cui aprire la creatività.anchor
contiene un punto di ancoraggio (ad esempio,Marker
). Se l'opzioneanchor
ènull
o non è definita, la finestra informativa si aprirà nella relativa proprietàposition
.
TypeScript
// This example displays a marker at the center of Australia. // When the user clicks the marker, an info window opens. function initMap(): void { const uluru = { lat: -25.363, lng: 131.044 }; const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: uluru, } ); const contentString = '<div id="content">' + '<div id="siteNotice">' + "</div>" + '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + '<div id="bodyContent">' + "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " + "sandstone rock formation in the southern part of the " + "Northern Territory, central Australia. It lies 335 km (208 mi) " + "south west of the nearest large town, Alice Springs; 450 km " + "(280 mi) by road. Kata Tjuta and Uluru are the two major " + "features of the Uluru - Kata Tjuta National Park. Uluru is " + "sacred to the Pitjantjatjara and Yankunytjatjara, the " + "Aboriginal people of the area. It has many springs, waterholes, " + "rock caves and ancient paintings. Uluru is listed as a World " + "Heritage Site.</p>" + '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + "https://en.wikipedia.org/w/index.php?title=Uluru</a> " + "(last visited June 22, 2009).</p>" + "</div>" + "</div>"; const infowindow = new google.maps.InfoWindow({ content: contentString, ariaLabel: "Uluru", }); const marker = new google.maps.Marker({ position: uluru, map, title: "Uluru (Ayers Rock)", }); marker.addListener("click", () => { infowindow.open({ anchor: marker, map, }); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example displays a marker at the center of Australia. // When the user clicks the marker, an info window opens. function initMap() { const uluru = { lat: -25.363, lng: 131.044 }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, }); const contentString = '<div id="content">' + '<div id="siteNotice">' + "</div>" + '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + '<div id="bodyContent">' + "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " + "sandstone rock formation in the southern part of the " + "Northern Territory, central Australia. It lies 335 km (208 mi) " + "south west of the nearest large town, Alice Springs; 450 km " + "(280 mi) by road. Kata Tjuta and Uluru are the two major " + "features of the Uluru - Kata Tjuta National Park. Uluru is " + "sacred to the Pitjantjatjara and Yankunytjatjara, the " + "Aboriginal people of the area. It has many springs, waterholes, " + "rock caves and ancient paintings. Uluru is listed as a World " + "Heritage Site.</p>" + '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + "https://en.wikipedia.org/w/index.php?title=Uluru</a> " + "(last visited June 22, 2009).</p>" + "</div>" + "</div>"; const infowindow = new google.maps.InfoWindow({ content: contentString, ariaLabel: "Uluru", }); const marker = new google.maps.Marker({ position: uluru, map, title: "Uluru (Ayers Rock)", }); marker.addListener("click", () => { infowindow.open({ anchor: marker, map, }); }); } window.initMap = initMap;
Prova anteprima
L'esempio seguente imposta la maxWidth
di una finestra informativa:
visualizza esempio.
Impostare lo stato attivo su una finestra informativa
Per impostare lo stato attivo su una finestra informativa, chiama il relativo metodo focus()
. Ti consigliamo di utilizzare questo metodo insieme a un evento visible
prima di impostare lo stato attivo. Chiamare questo metodo su una finestra informativa non
visibile non ha alcun effetto. Chiama il numero open()
per rendere visibile una finestra informativa.
Chiudere una finestra informativa
Per impostazione predefinita, rimane aperta una finestra informativa finché l'utente non fa clic sul controllo di chiusura (una croce in alto a destra nella finestra informativa) o premi il tasto Esc.
Puoi anche chiudere esplicitamente la finestra informativa chiamando il metodo close()
.
Quando viene chiusa una finestra informativa, lo stato attivo passa nuovamente all'elemento attivo prima che venga aperta la finestra informativa. Se questo elemento non è disponibile, viene spostato di nuovo lo stato attivo sulla mappa. Per eseguire l'override di questo comportamento, puoi ascoltare l'evento closeclick
e gestire manualmente lo stato attivo come mostrato nell'esempio seguente:
infoWindow.addListener('closeclick', ()=>{ // Handle focus manually. });
Spostare una finestra informativa
Puoi modificare la posizione di una finestra informativa in due modi:
- Chiama
setPosition()
nella finestra informativa oppure - Allega la finestra informativa a un nuovo indicatore utilizzando il metodo
InfoWindow.open()
. Nota: se chiamiopen()
senza passare un indicatore,InfoWindow
utilizzerà la posizione specificata al momento della creazione tramite il valore letterale dell'oggettoInfoWindowOptions
.
Personalizzazione
Il corso InfoWindow
non offre personalizzazione. Visualizza invece l'esempio di popup personalizzato per scoprire come creare un popup completamente personalizzato.