Archivio per marzo 2010

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.

Visualizzazione mappe con Google Fusion Tables

Tralasciando per un attimo le nostre piccole creazioni in javascript per sfruttare le potenzialità delle Google Maps V3,  in questo post vorrei introdurre un modo estremamente semplice per visualizzare in una Google Map dati geografici che abbiamo precedentemente immagazzinato in una tabella in formato CSV,  ODS o XLS. A tale scopo possiamo sfruttare il servizio Google Fusion Tables, cui potete accedere previa identificazione con il vostro account Gmail.  
Il sistema è davvero molto semplice:

  1. Cliccate su New Table
  2. Prelevate il file di indirizzi che volete visualizzare dal vostro PC o direttamente da Google Spreadsheet. Cliliccate su Next
  3. Selezionate l’intestazione e le colonne da includere e clicate su Next
  4.  Eventualmente scrivete alcune informazioni aggiuntive sul file
  5. Andate su Edit, Modify, e specificate quali dati devono essere considerati come Location (cambiandone il tipo da Text). Cliccate su Save
  6. Nel menu andate in Visualize poi Map e visualizzate il risultato. Potrebbe accadere, la prima volta che visualizzate la mappa, che non venga centrata subito sui vostri punti).

Un piccolo esempio, creato per l’occasione, lo potete trovare qui.

Le potenzialità del sistema sono davvero notevoli. Diventa infatti estremamente interessante lavorare con indirizzari pubblici trovati sulla rete, oppure, per fare un altro esempio, con le collezioni di POI che vengono utilizzati dai navigatori satellitari. 

Google Fusion Tables, tra l’altro, non nasce solo per visualizzare mappe geografiche ma per elaborare graficamente esempi complessi di lavoro collaborativo tanto da prevedere un merge (unione) tra i nostri dati e quelli di altre tabelle pubbliche o private. Al di là dei nostri interessi geografici dunque, consiglio uno sguardo più che approfondito a questa nuova applicazione dei Google Labs.


Creative Commons License
Questo/a opera è pubblicato sotto una Licenza Creative Commons.

Addthis

AddThis Social Bookmark Button

Flickr Photos


%d blogger hanno fatto clic su Mi Piace per questo: