Usare Google Maps – Prima parte
mercoledì 30 agosto 2006
(11 voti, media: 4,55)
Loading ...
Google Maps è davvero una cosa utile. Oramai ci si sta sviluppando sopra qualsiasi tipo di servizio: dal geomarketing ai servizi di monitaraggio del traffico... Insomma, cani e porci stanno utilizzando queste API.
Visto che tra cani e porci molti (me compreso) ci si trovano bene, oggi vediamo, partendo dal solito principio del "Perché non posso usare (roba a caso) nella mia fichissima Web Application?" citato qui, come poter anche noi utilizzare tutta la potenza di Google Maps, creando da zero una mappa in cui poter inserire dei markers a nostro piacimento.
I markers li posizioneremo correttamente (a seconda delle città sarà possibile addirittura specificare il numero civico della via) grazie al GeoCoder di Google Maps. Ogni marker conterrà un breve testo descrittivo.
Per questo tutorial si utilizzerà la versione 2 delle API, che include un comodo GeoCoder. Servono anche una manciata di PHP e un database MySQL che andrà a contenere le coordinate e i testi descrittivi di ogni marker.
Se proprio vogliamo fare i fighi facciamo tutti gli inserimenti via AJAX, generando al volo il JavaScript che piazza i markers sulla pagina senza farne il refresh. Ma sì, siamo fighi, facciamolo.
Il progetto prende (nel mio caso) il nome di NapoMaps per personalizzarlo un pochino chiamatelo quellochevipareMaps.
Andiamo per ordine però, facendo finta che sia la prima volta in vita nostra che usiamo Google Maps: alla fine di questa prima parte avremo creato una mappa, puntata sull'Italia, con un bel pop-up che punterà alla capitale.
Banale, ma da qualche parte si deve pur cominciare. "E si va!" Come diceva ai bei tempi J. AX degli Articolo 31.
Sì sono logorroico. Lo so.
P.s. Il tutto sarà validato xHTML 1.0 STRICT. Giusto per complicarci un po' la vita. Non è roba per i deboli di cuore.
OTTENERE UNA GOOGLE MAPS API KEY
Per poter utilizzare Google Maps all'interno del proprio sito web è necessario ottenere una Google Maps API Key, richiedendola direttamente a Google.
La chiave vale per un'intera directory su un dominio: se la richiedere per dominio.ext non varrà per dominio.ext/cartella/ e viceversa. Quindi sappiatevi regolare, o recuperate più chiavi per ogni sottocartella del dominio che andrete ad utilizzare.
Le chiavi sono gratuite. L'unico limite sono le richieste orarie al GeoCoder (traduce indirizzi in coordinate LAT - LONG), introdotto dalla versione 2 delle API. 50.000 richieste / ora giorno (grazie a Epper) dovrebbero però bastare a chiunque non voglia offrire un servizio professionale.
IMPOSTARE LA VOSTRA PRIMA PAGINA
Google offre un esempio di come dovrebbe essere una pagina contenente una Google Maps. Copiatela impunemente, ricordandovi di inserire la vostra chiave.
Allineate al centro della pagina la mappa, e decorate un po' la pagina. Anche l'occhio vuole la sua parte.
CENTRARE LA MAPPA
La funzione load() che avete copiato dall'esempio di Google crea la mappa nella "DIV" che ha come id "map".Il codice non è complicato, sbirciate il sorgente dell'esempio che troverete linkato alla fine di questa prima parte, dovrebbe essere facilmente comprensibile.
Vogliamo centrare la carta sull'Italia, quindi utilizziamo la funzione map.setCenter() che accetta due parametri:
- Un punto sulla mappa
- Il livello di zoom
Il punto viene creato usando la funzione GLatLng() che accetta a sua volta due parametri: latitudine e longitudine del punto, in formato decimale. Per recuperare i dati della vostra città preferita usate siti web come MapoRama. Nel caso di Roma le coordinate sono: 41.90, 12.49.
La funzione da scrivere, impostando un livello di zoom pari a 5 sarà quindi:
map.setCenter(new GLatLng(41.90, 12.49), 5);
I CONTROLLI
Ok, abbiamo centrato la mappa e possiamo navigare con il mouse... Come facciamo a visualizzare i controlli? Niente di più semplice.
map.addControl(new GMapTypeControl());
Attiva il controllo che permette di selezionare la mappa satellitare, solo stradale o ibrida.
map.addControl(new GLargeMapControl());
Attiva il controllo dello zoom e della navigazione... La classica barra a sinistra 
Per gli altri controlli si faccia riferimento alla documentazione ufficiale e alle prossime parti di questo tutorial.
IL POP-UP
Attraverso la funzione:
map.openInfoWindow(map.getCenter(), document.createTextNode("Roma!"));
Creiamo il pop-up sul centro della mappa, con testo "Roma!" map.getCenter() ritorna le coordinate del punto centrale della mappa.
CONCLUSIONI
Con una decina di righe di codice JavaScript abbiamo creato la nostra prima mappa, utilizzando le API Google Maps. Questa prima parte del tutorial è volutamente semplice e "verbosa", in modo da poter essere di facile comprensione.
Man mano che procederemo in questo tutorial (ci saranno almeno altre 3-4 parti, forse più), affronteremo aspetti diversi quali l'interfacciamento a database, il posizionamento di markers, ecc...
Ecco quanto dovreste essere riusciti a fare oggi: prima parte.
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.
4 settembre 2006 alle 21:05
Ben fatto…
Devo proprio usare GoogleMaps per un progetto a breve, ora mi sono fatto una idea di come funziano
P.S.
Il limite di richieste è 50.000 richieste al giorno. Non all’ora
6 settembre 2006 alle 08:40
Correggo subito
Grazie e a presto x la prossima puntata
10 settembre 2006 alle 10:36
Ottimo tutorial,semplice ma completo. attendo con ansia la seconda parte
I miei complimenti
10 settembre 2006 alle 15:47
[...] Come promesso rieccoci per la seconda parte del tutorial su Google Maps. La prima parte del tutorial è disponibile a questo indirizzo. [...]
1 ottobre 2006 alle 21:25
[...] 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 [...]
3 ottobre 2006 alle 10:02
Ottima guida, anche nelle sue parti seguenti. Ho già realizzato qualche prova con le API di GoogleMaps, ma adesso mi hai offerto spunti interessanti
8 ottobre 2006 alle 20:16
Vorrei fare un appunto: mi è capitato di chiedere un key per un la root di un dominio ma funziona benissimo anche su una sua sottocartella.
19 ottobre 2006 alle 21:00
[...] Prima parte [...]
18 dicembre 2006 alle 12:10
ciao,
complimenti per questo tutorial
vorrei inserire una maps che mi faccia vedere direttamente una città e non tutta l’italia…come posso fare?
mi piacerebbe avere la versione ibrida e satellite oltre alla classica
grazie e ancora comilmenti
18 dicembre 2006 alle 14:14
@Ale
Per quanto riguarda il centrare una città o una via guarda qui. Poi basterà giocare un po’ sullo zoom.
Per visualizzare in partenza la mappa ibrida o satellitare, invece guarda la documentazione ufficiale per la funzione setMapType()
18 dicembre 2006 alle 21:33
complimenti per il tutorial…
in realtà le mie esigenze sono molto più misere…
e non ho ben capito come fare ad implementare il pop up con l’indirizzo del luogo da segnalare sull’eventuale mappa..
(un indirizzo completo e non solo il nome della città)
grazie
carlo
18 dicembre 2006 alle 22:08
@Carlo Leggi la seconda e terza parte del tutorial
9 gennaio 2007 alle 19:07
ciao,
nn ho mai usato google map e volevo sapere se si può utilizzare il geocoding in una classe java normale, cioè niente pagina web con javascrip.
Come mi connetto a google?? devo includere delle librerie o altro??
grazie saluti!
9 gennaio 2007 alle 19:38
@loly
Penso che si possa fare, ma sicuramente violerebbe le licenze di Google Maps.
Ci sono molti geocoder gratuiti in giro, cerca su Google
10 gennaio 2007 alle 13:35
ti ringrazio!! ciao
20 aprile 2007 alle 09:21
[...] Le Google Maps sono strumenti molto potenti e, per piccole o medie realtà, gratuiti. A questo proposito vi segnalo l’ottima guida suddivisa in 3 parti di Napolux. A questa pagina invece potete ottenere le api e consultare la documentazione ufficiale (in inglese) Buona lettura! [...]
19 luglio 2007 alle 22:20
[...] Un altro articolo che ha avuto un buon successo è stato il tutorial in tre parti sull’utilizzo di Google Maps e del suo Geocoding. [...]
20 luglio 2007 alle 22:48
ciao,
h un problema ….ho ottenuto una key ma poi mi dice che è già stata assegnata ad un altro ito…che devo fare???
21 luglio 2007 alle 08:40
@Valerio
Generane una nuova e controlla che il sito che inserisci corrisponda a quello su cui andrai a lavorare
21 agosto 2007 alle 04:08
Ottima guida, anche nelle sue parti seguenti. Ho già realizzato qualche prova con le API di GoogleMaps, ma adesso mi hai offerto spunti interessanti
21 agosto 2007 alle 04:09
Vorrei fare un appunto: mi è capitato di chiedere un key per un la root di un dominio ma funziona benissimo anche su una sua sottocartella.
26 agosto 2007 alle 11:08
ho seguito i vari passi e fin’ora tutto bene
grazie.
9 ottobre 2007 alle 19:31
Mizziga… con uno script sbagliato mi sono mangiato 50.000 visualizzazioni in 1 minuto…..
Adesso a livello di IP non mi fa accedere neanche al sito googleMap!!!
8 dicembre 2007 alle 11:39
SISTEMA AUTOMATICO PER OTTENERE IL GEOCODING DI UN INDIRIZZO
google mette a disposizione uno script che genera in vari formati (xml, kml, csv, or json.) un file di esportazione che dato un indirizzo ne fa il geocoding ritornando latitudine e longitudine. qui il link alla documentazione:
http://code.google.com/apis/maps/documentation/services.html#Geocoding
personalmente trovo molto comodo il formato csv, sotto riporto un esempio di utilizzo
$params = “http://maps.google.com/maps/geo?q=Via+Agnini,13,41012+Carpi+Modena,Emilia+Romagna,Italia&output=csv&key=TUOCODICE”;
$csv_latitudine = file_get_contents($params);
list( $http_status_code, $accuracy, $latitude, $longitude) = explode(”,”, $csv_latitudine);
25 gennaio 2008 alle 10:36
Devo usare google map per fare delle cartine della zona di bucarest ma inserendo nello script bucarest e nome della zona a volte mi dà indirizzo non trovato es Bucureşti Baba Novac. Ma la cosa strana è che se vado su http://maps.google.it/ e inserisco Bucureşti Baba Novac me lo trova. come mai c’è un modo per risolvere il problema ?? Grazie
28 gennaio 2008 alle 14:10
Io sto usando google maps in locale. Ho inserito il codice javascript all’interno di una pagina HTML e la visualizzo bene su browser.
Ho generatola key inserendo il dominio sotto il quale sto lavorando; poi ho inserito il mio codice dentro una jsp messa all’interno del mio application server ma compare il messaggio: “La chiave API di Google Maps utilizzata in questo sito è stat tregistrata per un altro sito…”.
La domanda è:cosa dovrei mettere nell’indirizzo per generare la key, visto che io attualmente devo effettuare delle prove e visto che lavoro sotto dominio aziendale?
30 gennaio 2008 alle 15:28
Posso utilizzare Google Map Beta in un sito internet munito di autenticazione all’accesso(login)?
14 aprile 2008 alle 12:00
Ciao,ho letto e scaricato tutta la tua guida.
La trovo molto interessante per chi è neofita di questo tipo di strumento.
Ho iniziato ad inserire le mappa di google nei miei siti.
Inizialmente non ho avuto problemi di sorta ma da un pò di giorni( credo dopo aver aggiornato mozilla firefox) ho riscontrato dei problemi di visualizzazione della mappa stessa.
In IE 7 nessun problema, funziona perfettamente, ma in firefox al posto dell’immagine del marker viene fuori un quadrato grigio ed anche i controlli di zoom in alto a sinistra vengono fuori in grigio e non sono visualizzabili.
Se vuoi dare un’occhiata gli url dei siti sono http://www.acquadimaresanvito.it/contatti.asp e http://www.ilvelierosanvito.com/contatti.asp.
Mi sapresti dire qual è il problema?
Ti ringrazio anticipatamente per la disponibilità e soprattutto per la guida.
P.S. se trovi il problema potresti inviarmi una email?Grazie ancora