Geocoding con Google Maps API V3: un esempio

Scopo di questo tutorial è introdurre nella maniera più semplice possibile le funzionalità geocoding offerte dalle Google Maps V3.
Supponiamo di avere una serie di indirizzi stradali dei quali non conosciamo le coordinate. Per visualizzare tali punti sulla mappa abbiamo appunto necessità di una funzione (geocoding) che, a partire da un indirizzo in formato testo, restituisce una coppia di coordinate spaziali.
Lo script che ho realizzato, ampiamente commentato, è composto da diverse parti.

La prima parte definisce e carica due array, contenenti i dati da visualizzare sulla mappa, cioè gli indirizzi stradali e le relative descrizioni

descrizioni = new Array();
indirizzi = new Array();

//popolamento vettori

indirizzi[0]=”Viale Italia 40, La Spezia, Italia”;
descrizioni[0]=”Qui sono nato e cresciuto”;
indirizzi[1]=”via pascoli 64 la spezia italia”;
descrizioni[1]=”Qui ho fatto le elementari”;
indirizzi[2]=”Via Leopardi 1 la spezia italia”;
descrizioni[2]=”Qui ho fatto le medie”;
indirizzi[3]=”via giacomo doria 2 la spezia italia”;
descrizioni[3]=”Qui ho fatto le superiori”;

Il cuore dell’applicazione è costituito dalla funzione javascipt codifica_indirizzi, che ha come parametri in ingresso un indirizzo stradale e una descrizione da visualizzare. In uscita, il risultato della funzione è un marker (ottenuto dal geocoding dell’indirizzo stradale) con la relativa descrizione. Tale funzione viene eseguita, attraverso un ciclo iterativo FOR, tante volte quanti sono gli elementi del vettore indirizzi.

function codifica_indirizzi(indirizzi, titolo)

      {
        geocoder.geocode({ ‘address’: indirizzi}, function(results, status)
           {   map.setCenter(results[0].geometry.location);
               var marker = new google.maps.Marker
                             ({ map: map,
                                 position: results[0].geometry.location,
                               title: titolo });

                                  });

             }

La funzione principale è la funzione visualizzamappa che definisce i criteri di visualizzazione della mappa (tipo ROADMAP, livello di zoom) e attiva il ciclo di scansione dei vettori indirizzi e descrizioni.

function visualizzamappa() {
                  geocoder = new google.maps.Geocoder();
                  var opzioni = {zoom: 15, mapTypeId: 
                                 google.maps.MapTypeId.ROADMAP }
                   map = new google.maps.Map(document.getElementById
                       (“map_canvas”), opzioni);

Il risultato finale lo potete trovare qui.

Piccola digressione. La funzione geocoding utilizzata si presta molto bene a codificare indirizzi inseriti dall’utente in un piccolo form come si vede in questo esempio. Ciò accade poichè la richiesta è asincrona (i dati che ci servono sono localizzati in server)

Ho avuto qualche difficoltà nella corretta visualizzazione delle descrizioni per ogni marker. Il metodo geocode() mal si accorda a soddisfare le richieste del ciclo for .  In pratica il ciclo for incrementa il contatore avanti prima che il marker potesse comparire (senza attendere cioè il risultato della richiesta fatta al server Google dalla funzione). Grazie a un suggerimento di Napolux ho focalizzato il problema e ho trovato la soluzione, “spezzando” il codice scrivendo due funzioni.

In effetti, una maniera più elegante e corretta di codificare una serie di indirizzi fissi, come quelli precaricati nel vettore, è quella di accedere al servizio di geocoding tramite una richiesta http. In questo caso avremmo però bisogno di un API Key. Magari in un altro articolo si approfondirà questo aspetto.