Usare Google Maps – Seconda parte
domenica 10 settembre 2006
(7 voti, media: 4,86)
Loading ...
Come promesso rieccoci per la seconda parte del tutorial su Google Maps. La prima parte del tutorial è disponibile a questo indirizzo.
Oggi impareremo ad usare il GeoCoder, muovendoci sulla mappa a seconda dell'indirizzo inserito, e visualizzando un marker. Cliccando sul marker si aprirà un pop-up con l'indirizzo cercato.
DEFINIZIONE DI GEOCODING
Dicesi Geocoding il procedimento per cui si trasformano in coordinate geografiche (di solito Latitudine e Longitudine), indirizzi del tipo "Via, Numero Civico, Città". Un'interessantissima panoramica sul Geocoding è disponibile su Wikipedia.
IL GEOCODER DI GOOGLE MAPS
Esistono molti Geocoder, gratuiti o meno, e Google, dalla versione 2 delle API di Google Maps ha integrato un geocoder, che accetta 50.000 richieste / giorno, circa 1.6 al secondo, per ogni API KEY utilizzata.
Ovviamente non tutto il pianeta è coperto dal GeoCoder, gli USA sono, come si poteva immaginare, lo stato più coperto. Nel caso dell'Italia siamo abbastanza fortunati, ma si verifica ancora qualche errore non formattando correttamente gli indirizzi.
ATTIVARE IL GEOCODER
Per utilizzare il GeoCoder in Google Maps bisogna attivarlo. Per fare questo, creiamo una nuova variabile denominata geocoder, all'interno dello script relativo alla prima parte del tutorial.
Fatto questo creiamo il GeoCoder, assegnandolo alla variabile appena allocata all'interno della funzione load() la funzione che crea la mappa.
// Creo GeoCoder Max 1.6 query/sec geocoder = new GClientGeocoder();
Niente di più facile. Ora dobbiamo però creare la funzione che interroghi il GeoCoder. Di un GeoCoder che non codifichi non ce ne facciamo nulla 
function showAddress(address) { geocoder.getLatLng(address, function(point) { if (!point) { // Indirizzo non trovato! alert(address + " non trovato!"); } else { // Indirizzo trovato, centra la mappa sul punto map.setCenter(point, 14); // Crea il marker map.addOverlay(createMarker(point, address)); } }); }
Ora siamo pronti, e il nostro GeoCoder è pronto anche lui. Cosa abbiamo fatto? Nel primo script abbiamo creato l'oggetto GClientGeocoder, la documentazione delle API lo descrive molto meglio di quanto sappia fare io, a questo indirizzo.
La funzione showAddress() invece si occupa di interrogare il geocoder, attraverso JavaScript. Mi raccomando, prevedete SEMPRE l'eventualità che il GeoCoder non riesca a trovare l'indirizzo cercato, capita molto spesso per paesi che non siano gli Stati Uniti. In questo caso un alert() avvisa dell'errore.
Se l'indirizzo viene trovato la mappa viene spostata sul punto utilizzando il metodo map.setCenter(). Se non è necessario zoomare sulla mappa è possibile utilizzare anche il metodo panTo().
Viene in seguito creato un marker. Al click sul marker si aprirà un pop-up contenente l'indirizzo ricercato.
La funzione che crea il marker, createMarker(), riceve il punto ritornato dal GeoCoder, e crea il pop-up relativo al click sul marker. Il pop-up conterrà l'indirizzo cercato, ma potrebbe contenere un qualsiasi codice HTML.
Così facendo, per ogni ricerca effettuata verrà posizionato un marker. Se anche si arrivasse ad avere 100 markers sulla mappa (100 ricerche effettuate senza fare il refresh della pagina), un semplice click riporterà l'indirizzo esatto per ogni marker. Provare per credere.
// Crea il marker con la label passata come parametro function createMarker(point, label) { // Variabile marker var marker = new GMarker(point); // Crea listener per il click sull'oggetto GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(label); }); return marker; }
IL MODULO
Ora che tutto è pronto dobbiamo poter passare a showAddress() la stringa che contiene l'indirizzo da "tradurre". Un semplice modulo fa al caso nostro. Non ci sarà una pagina che riceva le informazioni, quindi il submit() del modulo ritornerà un valore falso. Ci servirà anche più avanti.
CONCLUSIONI
Eccoci qua: a questo punto dovreste aver ottenuto una GoogleMaps che permette attraverso un modulo di poter ricercare un indirizzo: seconda parte.
Provate con query tipo "Milano, Italia", "Palermo, Italia", "Via L. da Vinci, Seregno, Milano, Italia", ecc...
Il codice come al solito è ben commentato e di facile lettura. Comunque, per qualsiasi chiarimento, dubbio o annotazione lasciate un commento, sono sempre ben accetti.
Il tutorial sarà disponibile in formato PDF appena concluso, comprenderà tutte le modifiche e i suggerimenti ricevuti.
In alternativa puoi abbonarti alla newsletter, riceverai un'email ogni volta che verrà pubblicato un nuovo post. Il tuo indirizzo email sarà gestito da Feedburner.
10 settembre 2006 alle 18:06
Se fai diventare il pulsante di tipo “submit” quando premo invio parte in automatico la ricerca, altrimenti devo usare il mouse oppure tab (e sono pigro
)
10 settembre 2006 alle 18:14
Modificato l’esempio. Io sono stato pigro a non voler modificare il submit…
Vale nel nostro caso quanto si legge qui: Why Good Programmers Are Lazy and Dumb
13 settembre 2006 alle 00:44
Ottima anche la 2a parte del tutorial,ancora i miei complimenti
2 ottobre 2006 alle 21:21
[...] Eccoci qua. Prima di cominciare, a chi non lo avesse ancora fatto, consiglio di leggere le prime due parti di questo tutorial. Usare Google Maps – Prima parte Usare Google Maps – Seconda parte [...]
19 ottobre 2006 alle 21:01
[...] Seconda parte [...]
24 ottobre 2006 alle 21:17
[...] Siccome i bravi programmatori devono essere pigri e stupidi, riciclo bellamente l’esempio relativo alla seconda parte del tutorial su Google Maps: in quell’esempio viene piazzato un marker dopo una ricerca indirizzo andata a buon fine. [...]
2 aprile 2007 alle 12:27
ciao,avrei bisogno di un aiuto….
di seguito viene riporta una porzione del codice da me utilizzato:
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() – southWest.lng();
var latSpan = northEast.lat() – southWest.lat();
il problema e’ che vorrei memorizzare questi dati in un file in modo che possano essere utilizzati da un altro programma da me realizzato.
E’ possibile fare una cosa del genere? Mi puoi dare qualke dritta?
Grazie Alfredo
23 luglio 2007 alle 12:11
Ciao a tutti. E’ possibile ricavare l’indirizzo da un punto (praticamente l’operazione inversa a quella spiegata in questa guida)? Grazie
23 luglio 2007 alle 13:29
@Giacomo
http://www.google.it/search?q=reverse+geocoding
27 luglio 2007 alle 11:30
ciao,ok ora ci sono.
Solo una domandina : io voglio gestire un solo ndirizzo senza avere tabelle in mysql e php, come faccio a far comparire il marker solo con le coordinate che mi interessano?
Grazie
27 luglio 2007 alle 11:36
@Valerio
Devi mettere il marker su un indirizzo preciso e basta? Guarda la 3a parte bis
30 agosto 2007 alle 15:58
Ciao a tutti. E’ possibile ricavare l’indirizzo da un punto (praticamente l’operazione inversa a quella spiegata in questa guida)? Grazie
30 agosto 2007 alle 16:33
@Max
Con Google Maps no. Potresti utilizzare uno dei tanti servizi di reverse geocoding. Ma per l’Italia non ce ne sono di precisi, anzi forse non ce ne sono proprio.
27 settembre 2007 alle 09:06
Ciao, ho seguito tempo fa i tuoi utilissimi tutorial sulle API di Google Maps. Per quanto riguarda il geocoder, a me serve il percorso inverso, ovvero, partendo dalle coordinate geografiche vorrei ottenere automaticamente indirizzo, numero civico, città, stato, ecc. Ti chiedo perchè non so più dove sbattere la testa…la guida di Google non accenna queste cose, e con i motori di ricerca non ho trovato molto. Ti sarei grato se mi potessi aiutare.
Grazie, e complimenti per il blog
27 settembre 2007 alle 09:56
Eh, purtroppo google non fornisce servizi di reverse geocoding. Quei pochi che lo fanno non sono così precisi come vorresti tu. Per l’Italia poi non c’è quasi nulla.
20 ottobre 2007 alle 19:41
ciao Napolux e complimenti per blog e guida!
Sto cercando di fare in modo che la richiesta di centrare sulla localita inviata sia in una pagina precedente a quella che contiene la mappa.
20 ottobre 2007 alle 23:14
Mai postare codice nei commenti, MAI!
Piuttosto mandate un’email.
Detto questo credo che tu debba far stampare il codice JS a PHP. Così puoi passare via GET tutte le variabili che vuoi da una pagina all’altra.
21 ottobre 2007 alle 23:20
ok mi scuso
riesco a passare con GET la variabile $citta alla pagina che contiene la mappa
ma non so come indicare a js di usare il contenuto di questa variabile come centro
conosco javascript molto poco, puoi aiutarmi?
grazie
paso
27 ottobre 2007 alle 17:42
tutto perfetto, grazie Napolux.
28 febbraio 2008 alle 12:26
Ciao mi spiegheresti al volo come creare un marker ogni volta che si clicca sulla mappa?non sono molto pratico di javascript, potresti illustrarmi brevemente?
5 giugno 2008 alle 17:45
E’ possibile effettuare la ricerca dell’indirizzo su una mappa creata da me nelle mie mappe di Google?
31 ottobre 2008 alle 20:06
Ciao Napolux, ti contatto per chiederti un chiarimento se puoi concedermelo, e ti ringrazio già in anticipo. Innanzitutto, complimenti x i tutorial, ti dico solo che mi hai aiutato così tanto che li sto usando in un progetto di Sistemi Informativi alla mia facoltà di ing. informatica, e sono già a buon punto. Ma l’ unico dubbio che mi resta è all’ incirca quello che ha sollevato Paso il 21 ottobre 2007: devo passare la città con un link in un altra pagina, e a quel punto far partire nella pagina con la mappa la funzione showaddress con quella città; ho fatto diversi tentativi di codice, e ti assicuro che ho provato in tutti i modi, ma daltr’ onde nn conosco JS benissimo. Spero tu possa aiutarmi..te ne sarei davvero grato…
31 ottobre 2008 alle 21:38
Facile, aggiungi la chiamata alla funzione al codice JS della funzione load()… Puoi passare la città via GET e poi far stampare il codice necessario a PHP.
Non mi dire che sei uno studente di ingegneria e vuoi la pappa bella e pronta, eh…
1 novembre 2008 alle 02:49
magari può sembrare che ho bisogno della pappa…tuttavia, ho provato anke nel modo come hai detto tu: ho già pronta la variabile passata con l’ url, e ho già provato a mettere la funzione in questione dentro la load(); ora, non so se posso metterti codice così come l’ ho scritto io (ho già notato cosè successo a Paso il 20 Ottobre 2007), quindi ti kiedo se fosse il caso di sentirci x email, magari per risolvere definitivamente sto problema che mi (ci) tartassa.
Grazie ancora per la disponibilità oltre che alla prontezza della risposta.
25 marzo 2009 alle 10:58
ciao,
ma come fai a verificare se l’indirizzo che hai inserito non è stato modificato. prova infatti a inserire via rma milano.. vedi che ti trova via roma milano. è possibile fare un controllo per informare l’utente che l’indirizzo cercato non è stato trovato, ma ne è stata trovata un’alternativa ??
25 marzo 2009 alle 11:17
@ mauro:
Le API da quel che mi è parso di capire non sono così “evolute” da dirti se l’indirizzo ritornato è suggerito o preciso al 100%.
Quindi o ti torna un indirizzo (giusto o sbagliato, non lo sai) o non te lo torna.
26 marzo 2009 alle 00:21
ho trovato io comunue una soluzione “grezza”. faccio un confronto su cosa ho cercato e su cosa mi è tornato..
28 agosto 2009 alle 20:51
Ho lo stesso problema di”Alfredo” che il 2/4/07 scrive …
“”vorrei memorizzare questi dati in un file in modo che possano essere utilizzati da un altro programma da me realizzato.”"
In realtà avrei un archivio con una serie di indirizzi che vorrei convertire (tutti in una volta) in coordinate geografiche, da memorizzare nel medesimo archivio.
Non vorrei essere costretto ad utilizzare il buon vecchio VB6 per :
1) caricare nell’OCX (di cui mi sfugge il nome ma consente di visualizzare una pagina WEB in un form) una mappa con un marker sul primo indirizzo;
2) fare il parsing del codice HTML di questa pagina fino a riconoscere la latitudine e la longitudine;
3) memorizzare queste coordinate nel database
4) passare al prossimo indirizzo.
5) cosi fino alla fine di tutti gli indirizzi (anche se ci mette un’ora per me va bene)
Grazie e …. complimenti
15 ottobre 2009 alle 16:10
ciao,
ho letto la tua ottima guida ma volevo chiederti se è possibile far aprire la mappa (oltre al punto indicato) dei negozio o farmacie o scuole nelle vicinanze.
per avere una mappa del tipo: tu sei qui e nelle vicinanze hai questo.
googlemap lo fa ma non ho trovato funzioni per genrarlo.