Nel caso in cui nell'implementazione di una Google Maps siano presenti più segnaposto (marker), ai quali sono associati delle infowindow, si pone un potenziale problema di visibilità e navigabilità della mappa. Se implementato l'evento dell'apertura della infowindow al click sul marker, nel caso di molti marker, le infowindow rimangono aperte sovrapponendosi l'una con le altre, e rendendo di fatto impossibile la leggibilità delle informazioni esposte e della navigabilità della mappa stessa.
Un modo elegante per ovviare a questo problema, è permettere la chiusura automatica della infowindow (la finestra delle informazioni associate al marker) all'apertura di una nuova finestra ad un nuovo click su un altro marker. Questa funzionalità non è il comportamento predefinito che la Google Maps implementa (come erroneamente si potrebbe pensare); implementarlo però è relativamente semplice, basta usare un piccolo accorgimento e richiamare opportunamente il metodo "close()" della infowindow, andiamo a scoprire come fare.
Per definire una finestra d'informazioni associata all'evento click su un marker, usiamo una variabile Javascript tooltip e poi l'oggetto infowindow che le API V3 di Google Maps ci mette a disposizione, in questo modo:
var tooltip = 'Titolo del marker. Testo del marker';
var infowindow = new google.maps.InfoWindow({content: tooltip});
ovviamente il codice html definito nella variabile tooltip si può inserire direttamente, o se lo si preferisce anche del semplice testo in chiaro.
Adesso per associare la infowindow all'evento onclick sul segnaposto (marker) presente nella mappa, definiamo l'evento click in questo modo:
google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); });
con quest'ultima istruzione diciamo alla google maps con id=map di associare all'evento click del marker l'apertura della infowindow.
Fin qui, nulla di difficile, ma se i marker fossero molti con altrettante infowindow, come facciamo a far chiudere la precedente infowindow quando clicchiamo su un nuovo marker?
Andiamo a definire una variabile Javascript a livello globale, inizialmente la settiamo a null, ma questa servira da contenitore per l'ultima infowindow aperta. Dopodichè riscriviamo la funzione dell'evento click associato al marker, quindi avremo:
var infowindowprec = null;
google.maps.event.addListener(marker, 'click', function() {
if (infowindowprec) {
infowindowprec.close(); //chiude la precedente infowindow
}
infowindow.open(map,marker); //apre la nuova infowindow
infowindowprec = infowindow; //assegna l'attuale infowindow alla variabile globale
});
Lo script è piuttosto semplice, ma diamo qualche indicazione, la variabile globale "infowindowprec" è inizialmente settata a null, la funzione associata all'evento click sul marker è un po più complessa della precedente; innanzitutto fà un controllo se var globale è nulla o meno, se non lo è entra dentro l'if e viene chiusa invocando il metodo close() dell'oggetto infowindow che la rimuove dal DOM del browser; dopodichè apre la infowindow corrente con il metodo open(), infine assegna alla variabile globale infowindowprec l'attuale infowindow così che al prossimo scatenarsi dell'evento cliick su un nuovo marker sarà l'attuale finestra ad essere chiusa e quella appena premuta ad aprirsi, semplice no?
Non c'è altro d'aggiungere, per chi volesse approfondire gli argomenti sulle Google Maps, può leggere i precedenti articoli:
Per chi invece volesse partire o avere tutti i riferimenti inerenti le API di Google Maps, questo è il link ufficiale della documentazione:
Google Maps Javascript API V3 Reference
Chiunque voglia aggiungere qualcosa, chiedere chiarimenti, su "Come chiudere le infowindow in presenza di molti marker con Google Maps" può farlo tramite i commenti.