Il codice che segue permette di creare una mappa con le API Google Maps visualizzando una lista di marker partendo da indirizzi. Il codice sfrutta il plugin GMap3 [1] per instanziare la mappa.
Per gestire la lista degli indirizzi da cui ricavare latitudine e longitudine per i marker avrei potute usare la funzione nativa del plugin stesso ma ho notato che, con array superiori ai 10 item, si crea un effetto poco piacevole. Quando la lista è numerosa, infatti, il codice impiega diverso tempo per ottenere le coordinate: la mappa viene immediatamente istaziata ma può passare anche qualche secondo prima che tutti i “balloon” vengano visualizzati.
Ho quindi cambiato approccio scrivendo una funzione che non chiama tutti gli indirizzi insieme ma li scorre uno ad uno mostrando i marker un po’ alla volta con un buon risultato. Altre funzioni sono:
– la mappa si centra sul primo indirizzo utile trovato
– viene offerta la possibilità di impostare il centro della mappa indipendentemente dagli indirizzi
– opzione per l’autofit in base ai marker
– in caso di mancanza di risultati validi la mappa si posiziona sulle coordinate di default (in questo caso Roma)
In più il codice è valido anche per mappe “responsive” dato che, al resize, viene riposizionato il centro della mappa sulle coordinate relative. Il codice è abbastanza chiaro e contiene commenti abbastanza esaustivi.
La demo è su questa pagina [2] mentre il download è disponibile a questo link [3].
googlemaps geocode address con timeout - jquery
soluzione jquery
1 Comment To "Google Maps Responsive con lista di marker da indirizzi utilizzando GMap3 e jQuery"
#1 Comment By salvo On 15 Gennaio 2017 @ 11:00
ottimo script!!
bella la visualizzazione punto per punto…
ma si potrebbe visualizzare anche la linea che unisce i vari punti? come quando si vede proprio l’itinerario seguito?