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.

Annunci

15 Responses to “Geocoding con Google Maps API V3: un esempio”


  1. 1 Paolo 15 settembre 2010 alle 7:03 pm

    Ciao!

    Grazie per il tuo splendido articolo. Ho adattato lo script integrandolo con un while in php che pessca tutti gli indirizzi inseriti in un database… tutto ok ma me ne mostra solo 11 se ne metto 12 o nessuno la mappa è completamente grigia.

    Ti risulta che posso inserire solo 11 markers?

    Io credo di no oppure è un’ opzione pro? Ho cercato su google ed ho visto che altri hanno avuto il medesimo problema, magari è un bug di come è impostato l’ array ma in javascript sono davvero un neofita.

    Ecco un’ altra testimonianza di ciò che dico: http://www.mail-archive.com/google-maps-js-api-v3@googlegroups.com/msg03298.html

    sei super, grazie!

  2. 2 Mutui Inpdap 23 novembre 2010 alle 8:36 pm

    Grazie mille,
    l’unico problema è che non è possibile centrare la mappa secondo delle precise coordinate…

  3. 3 mobytrick 13 aprile 2011 alle 6:40 pm

    Ho letto l’articolo e ho creato una mappa con 4 markers. Vorrei pero’ poter cambiare il colore dei marker oppure metterci dentro
    un numero. Ho provato a googlare ma non ne vengo fuori.
    Grazie in anticipo

    mobytrick

  4. 5 Matteo 12 giugno 2011 alle 11:20 am

    Trovo questo script molto utile, tuttavia rendendolo dinamico non mostra più di 11 punti…come mai?

  5. 7 enricosta 23 ottobre 2012 alle 12:47 am

    Anche io non riesco a vedere più di 10 punti sull mappa! Però utilizzo uno script con le API V.2.
    So che il limite alle richieste geocoder è di 2500 in un giorno, quindi il motivo deve essere un altro. Confuso

  6. 11 bästa resmålet i sydostasien 2015 25 novembre 2016 alle 11:11 pm

    Hello, I just wanted to mention, I disagree. Your post doesn’t make any sense.


  1. 1 Favoriti | Daniele Milana Trackback su 14 novembre 2013 alle 4:49 pm
  2. 2 law care service Trackback su 20 settembre 2015 alle 5:39 am
  3. 3 hosting plan provider Trackback su 14 dicembre 2016 alle 11:08 am
  4. 4 jual boneka hafiz Trackback su 4 febbraio 2017 alle 12:59 pm

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...




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

Addthis

AddThis Social Bookmark Button

Flickr Photos

Moods of blue

High heels

Altre foto

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