Info Window

lezione InfoWindow

google.maps.InfoWindow corso

Un overlay che ha l'aspetto di una bolla e che è spesso collegato a un indicatore.

Questa lezione si estende a MVCObject.

Accedi chiamando const {InfoWindow} = await google.maps.importLibrary("maps") o const {InfoWindow} = await google.maps.importLibrary("streetView"). Consulta la sezione Librerie nell'API Maps JavaScript.
InfoWindow
InfoWindow([opts])
Parametri: 
Crea una finestra informativa con le opzioni specificate. Un elemento InfoWindow può essere posizionato su una mappa in una determinata posizione o sopra un indicatore, a seconda di ciò che viene specificato nelle opzioni. Se la panoramica automatica non viene disattivata, una finestra informativa esegue una panoramica della mappa per renderla visibile quando viene aperta. Dopo aver costruito un DataWindow, devi chiamare l'apertura per visualizzarlo sulla mappa. L'utente può fare clic sul pulsante di chiusura nella finestra informativa per rimuoverla dalla mappa oppure lo sviluppatore può utilizzare Close() per ottenere lo stesso risultato.
close
close()
Parametri: nessuna
Valore restituito: nessuno
Chiude questa InfoWindow rimuovendola dalla struttura DOM.
focus
focus()
Parametri: nessuna
Valore restituito: nessuno
Imposta lo stato attivo su questo InfoWindow. Ti consigliamo di utilizzare questo metodo insieme a un evento visible per assicurarti che InfoWindow sia visibile prima di impostare lo stato attivo su di esso. Un InfoWindow non visibile non può essere impostato su attivo.
getContent
getContent()
Parametri: nessuna
Valore restituito:  string|Element|Text|null|undefined i contenuti di questa InfoWindow. Lo stesso vale per i contenuti impostati in precedenza.
getPosition
getPosition()
Parametri: nessuna
Valore restituito:  LatLng|null|undefined La posizione LatLng di questa InfoWindow.
getZIndex
getZIndex()
Parametri: nessuna
Valore restituito:  number Lo zIndex di questa finestra informativa.
open
open([options, anchor])
Parametri: 
  • options:  InfoWindowOpenOptions|Map|StreetViewPanorama optional Può essere un oggetto InfoWindowOpenOptions (consigliato) oppure la mappa|panorama su cui eseguire il rendering di InfoWindow.
  • anchor:  MVCObject|AdvancedMarkerElement optional l'ancoraggio a cui verrà posizionato questo InfoWindow. Se l'ancoraggio è non null, l'infoWindow viene posizionato in alto al centro dell'ancoraggio. Il pulsante InfoWindow verrà visualizzato sulla stessa mappa o panoramica dell'ancoraggio (se disponibile).
Valore restituito: nessuno
Apre questa finestra informativa sulla mappa. Facoltativamente, è possibile associare un'infoWindow a un ancoraggio. Nell'API principale, l'unico ancoraggio è la classe Marker. Tuttavia, un ancoraggio può essere qualsiasi MVCObject che espone una proprietà LatLng position e, facoltativamente, una proprietà Point anchorPoint per il calcolo di pixelOffset (vedi InfoWindowOptions). anchorPoint è la differenza rispetto alla posizione dell'ancoraggio alla punta dell'InfoWindow. Ti consigliamo di utilizzare l'interfaccia InfoWindowOpenOptions come singolo argomento per questo metodo. Per non modificare lo stato attivo del browser su Aperto, imposta InfoWindowOpenOptions.shouldFocus su false.
setContent
setContent([content])
Parametri: 
  • content:  string|Element|Text optionali contenuti da mostrare da questa finestra informativa.
Valore restituito: nessuno
setOptions
setOptions([options])
Parametri: 
Valore restituito: nessuno
setPosition
setPosition([position])
Parametri: 
  • position:  LatLng|LatLngLiteral optional La posizione LatLng in cui visualizzare questa finestra informativa.
Valore restituito: nessuno
setZIndex
setZIndex(zIndex)
Parametri: 
  • zIndex:  number Lo z-index per questa finestra informativa. Una finestra finestra temporale con uno z-index maggiore verrà visualizzata davanti a tutte le altre infoWindows con uno z-index inferiore.
Valore restituito: nessuno
Ereditato: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
closeclick
function()
Argomenti: nessuna
Questo evento viene attivato quando viene fatto clic sul pulsante Chiudi.
content_changed
function()
Argomenti: nessuna
Questo evento viene attivato quando la proprietà dei contenuti cambia.
domready
function()
Argomenti: nessuna
Questo evento viene attivato quando la <div> che contiene i contenuti di InfoWindow è collegata al DOM. Ti consigliamo di monitorare questo evento se stai creando i contenuti della finestra informativa in modo dinamico.
position_changed
function()
Argomenti: nessuna
Questo evento viene attivato quando la proprietà della posizione cambia.
visible
function()
Argomenti: nessuna
Questo evento viene attivato quando l'elemento InfoWindow è completamente visibile. Questo evento non viene attivato quando si esegue la panoramica di InfoWindow e poi torna allo schermo.
zindex_changed
function()
Argomenti: nessuna
Questo evento viene attivato quando lo zIndex di InfoWindow viene modificato.

Interfaccia InfoWindowOptions

Interfaccia google.maps.InfoWindowOptions

Oggetto InfoWindowOptions utilizzato per definire le proprietà che possono essere impostate in un'infoInfoWindow.
ariaLabel optional
Tipo:  string optional
AriaLabel da assegnare all'InfoWindow.
content optional
Tipo:  string|Element|Text optional
Contenuti da visualizzare nell'InfoWindow. Può essere un elemento HTML, una stringa di testo normale o una stringa contenente HTML. Le infoInfo verranno ridimensionate in base ai contenuti. Per impostare una dimensione esplicita per i contenuti, imposta i contenuti in modo che siano un elemento HTML con tali dimensioni.
disableAutoPan optional
Tipo:  boolean optional
Predefinito: false
Disattiva la panoramica della mappa per rendere completamente visibile l'infoWindow all'apertura.
maxWidth optional
Tipo:  number optional
Larghezza massima dell'infoWindow, indipendentemente dalla larghezza dei contenuti. Questo valore viene preso in considerazione solo se è impostato prima di una chiamata al numero open(). Per modificare la larghezza massima durante la modifica dei contenuti, chiama close(), setOptions(), quindi open().
minWidth optional
Tipo:  number optional
Larghezza minima dell'infoWindow, indipendentemente dalla larghezza dei contenuti. Quando si utilizza questa proprietà, consigliamo vivamente di impostare minWidth su un valore inferiore alla larghezza della mappa (in pixel). Questo valore viene preso in considerazione solo se è impostato prima di una chiamata al numero open(). Per modificare la larghezza minima durante la modifica dei contenuti, chiama close(), setOptions(), quindi open().
pixelOffset optional
Tipo:  Size optional
L'offset, in pixel, della punta della finestra informativa dal punto sulla mappa alle cui coordinate geografiche è ancorata la finestra informativa. Se viene aperta un'infoWindow con un ancoraggio, il pixelOffset verrà calcolato dalla proprietà anchorPoint dell'ancoraggio.
position optional
Tipo:  LatLng|LatLngLiteral optional
Il LatLng con cui visualizzare questa InfoWindow. In caso contrario, viene utilizzata la posizione dell'ancoraggio.
zIndex optional
Tipo:  number optional
Tutte le infoWindows vengono mostrate sulla mappa in ordine di zIndex, con valori più alti mostrati davanti a InfoWindows con valori più bassi. Per impostazione predefinita, le informazioni di Windows sono visualizzate in base alla loro latitudine, mentre le informazioni di Windows relative alle latitudini inferiori appaiono davanti alle informazioni di latitudine più alta. Le finestre Windows vengono sempre visualizzate davanti agli indicatori.

Interfaccia InfoWindowOpenOptions

Interfaccia google.maps.InfoWindowOpenOptions

Opzioni per l'apertura di un InfoWindow
anchor optional
L'ancoraggio a cui verrà posizionato questo InfoWindow. Se l'ancoraggio è non null, l'infoWindow viene posizionato in alto al centro dell'ancoraggio. Il pulsante InfoWindow verrà visualizzato sulla stessa mappa o panoramica dell'ancoraggio (se disponibile).
map optional
Tipo:  Map|StreetViewPanorama optional
La mappa o la panoramica su cui eseguire il rendering di questa InfoWindow.
shouldFocus optional
Tipo:  boolean optional
Indica se spostare o meno lo stato attivo all'interno di InfoWindow quando è aperto. Se questa proprietà non viene impostata o viene impostata su null o undefined, viene utilizzata un'euristica per decidere se spostare o meno lo stato attivo. Ti consigliamo di impostare esplicitamente questa proprietà in base alle tue esigenze, poiché l'euristica è soggetta a modifiche e potrebbe non funzionare correttamente per tutti i casi d'uso.