Google Maps API: “Calcola il percorso” nel nostro sito
Comments(11) 
Come molti di voi sapranno Google mette a disposizione per la maggior parte dei propri prodotti una serie di strumenti per sfruttarne le potenzialità nei nostri progetti.
Google Maps non fa eccezione e ci fornisce tutti gli strumenti (API) per sfruttare le mappe di Google nei nostri siti tramite Javascript.
Una delle funzionalità più utili è quella di poter calcolare il percorso ottimale per raggiungere un determinato luogo, ottenendo tutte le indicazioni sulle svolte e sulle strade da percorrere. Non molti sanno che queste funzionalità sono a disposizione degli sviluppatori per integrarle nei propri progetti, ed è proprio ciò che faremo.
Ipotizziamo di voler integrare nel nostro sito una comoda sezione “Come raggiungerci”, dove l’utente possa inserire la propria posizione ed ottenere il percorso per raggiungerci.
La nostra pagina quindi sarà composta da un breve form dove l’utente inserirà la posizione, la mappa dove verrà visualizzato il percorso e l’area in cui verranno visualizzate le informazioni:
<form name="findRoute" action=""> <p> <label for="partenza">Da dove parti?</label> <input type="text" name="partenza" /> </p> <p> <input type="submit" value="Calcola" name="calcola" id="calcola" /> </p> </form> <div id="map"></div> <div id="route"></div>
Com’è facile intuire la mappà sarà inserita all’interno del div map, mentre le indicazioni all’interno del div route.
Ma veniamo alla parte Javascript. Per prima cosa è necessario procurarsi una API Key dal sito google:
http://code.google.com/intl/it-IT/apis/maps/signup.html
Una volta ottenuta la chiave possiamo includere il javascript di Google Maps:
<script src="http://maps.google.com/maps?file=api&v=2.x&key=CHIAVE" type="text/javascript"></script>
Dove al posto di CHIAVE ci andrà la API Key fornita da Google.
Procediamo ora con lo script vero e proprio. Innanzitutto inizializziamo una serie di variabili vuote che conterranno gli oggetti di Google Maps che istanzieremo:
/* GOOGLE MAPS OBJECTS */ var home; //Home GLatLng object var map; //GMap object var directions; //Directions object var marker; //GMarker object
La prima funzione che andremo ad utilizzare sarà la funzione initialize() che come dice il nome preparerà tutto il necessario per far funzionare la mini-applicazione. Questa funzione dovrà essere richiamata al caricamento della pagina, ad esempio all’interno del tag body:
<body onload="initialize()">
Ma veniamo al codice. Per prima cosa recuperiamo gli elementi html che ci servono tramite il metodo document.getElementById:
//Get html elements needed:
var mapPanel = document.getElementById('map');
var directionsPanel = document.getElementById('route');
var submitButton = document.getElementById('calcola');
Subito dopo invece definiamo il nostro punto base, nell’esempio sarà la nostra ipotetica sede:
//Home location: home = new GLatLng(45.434629,12.337925);
Ora che abbiamo il necessario possiamo già istanziare la mappa che verrà visualizzata di default e mostrerà il punto base:
//Create a map: map = new GMap2(mapPanel); map.setCenter(home, 13); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl());
Per prima cosa viene creato l’oggetto GMap2, cioè la Google Map, e viene associato al div#map (mapPanel). La mappa viene poi centrata in home, al livello di zoom 13 (qui possiamo procedere a tentativi, più piccolo sarà il numero e più superficie terrestre vedremo). Tramite le altre due righe andiamo ad aggiungere i controlli che ci interessano (in questo caso i controlli standard e quelli per il tipo di visualizzazione – satellite, mappa, ibrida).
Ora dobbiamo evidenziare il punto base, e lo faremo aggiungendo un marker:
//Create marker: marker = new GMarker(home); map.addOverlay(marker);
Al marker possiamo aggiungere un fumetto descrittivo, contenente ad es. l’indirizzo, che si apre al click:
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<strong>Venezia</strong><br />Piazza San Marco");
});
Il comando addListener serve appunto per associare il click sul marker all’operazione di mostrare un fumetto contenente una stringa html (tramite il comando openInfoWindowHtml).
Come ultimo passaggio preparatorio dobbiamo istanziare l’oggetto GDirections di Google, che ci servirà per calcolare le rotte:
//Create directions module: directions = new GDirections(map, directionsPanel);
Ora che tutto è pronto dobbiamo preoccuparci di cosa fare quando l’utente premerà sul pulsante “Calcola”:
submitButton.onclick = function() {
getRoute();
return false;
}
Definiamo quindi la funzione getRoute():
function getRoute() {
var userLocation = document.findRoute.partenza.value;
from = userLocation;
to = home;
directions.load("from: " + from + " to: " + to, {"locale":"it_IT"});
}
Questa non fa altro che leggere la posizione di partenza dal campo compilato dall’utente e assegnarla alla variabile from e associare il punto base alla variabile to.
La magia avviene infine nell’ultima riga, dove andremo a calcolare la rotta tramite il metodo load del nostro oggetto GDirections.
A questo andremo a passare due parametri: Il primo sarà una stringa contenente le indicazioni nella forma “from:INDIRIZZO_DI_PARTENZA to:INDIRIZZO_DI_ARRIVO” (esattamente a come faremmo nella casella di ricerca in maps.google.it). Il secondo parametro invece è un oggetto che ci permette di specificare varie opzioni, in questo caso la lingua italiana.
Se andiamo a testare il tutto, dovremmo vedere che, una volta scelto un indirizzo di partenza, automaticamente verrà generato un percorso, visualizzato correttamente nella mappa, e generato il percorso passo-passo con tutte le indicazioni. Semplice no?
Ora aggiungiamo qualche funzionalità in più. Per prima cosa vogliamo dare la possibiltà di calcolare anche il percorso di ritorno. Aggiungiamo quindi un checkbox con la dicitura “Calcola percorso di ritorno”:
<h1>Come arrivare</h1> <form name="findRoute" action=""> <p> <label for="partenza">Da dove parti?</label> <input type="text" name="partenza" /> </p> <p> <label><input type="checkbox" name="inverti" value="inverti" />Calcola percorso di ritorno</label> </p> <p> <input type="submit" value="Calcola" name="calcola" id="calcola" /> </p> </form>
Nel javascript, all’interno di getRoute, andiamo quindi a gestire il caso in cui si voglia invertire la direzione:
function getRoute() {
var userLocation = document.findRoute.partenza.value;
var reverse = document.findRoute.inverti.checked;
if (!reverse) {
//andata...
from = userLocation;
to = home;
} else {
//ritorno...
from = home;
to = userLocation;
}
directions.load("from: " + from + " to: " + to, {"locale":"it_IT"});
}
Viene infatti controllato se la checkbox è selezionata oppure no, e in caso positivo vengono invertite le posizioni di partenza e arrivo.
Se visualizziamo l’esempio vediamo quindi che selezionando il checkbox le indicazioni saranno invertite, partendo dal punto base fino alla destinazione inserita dall’utente.
Come ultima personalizzazione andiamo a sostituire l’icona di default con una scelta ad-hoc. Per farlo ci avvaleremo dell’ottimo sito: http://www.powerhut.co.uk/googlemaps/custom_markers.php Il quale ci permette di caricare immagini in gif, jpeg e png per generare il corrispondente marcatore, completo di immagini e javascript.
Nel mio caso il risultato fornito è il seguente:
var myIcon = new GIcon(); myIcon.image = 'markers/image.png'; myIcon.printImage = 'markers/printImage.gif'; myIcon.mozPrintImage = 'markers/mozPrintImage.gif'; myIcon.iconSize = new GSize(65,190); myIcon.shadow = 'markers/shadow.png'; myIcon.transparent = 'markers/transparent.png'; myIcon.shadowSize = new GSize(160,190); myIcon.printShadow = 'markers/printShadow.gif'; myIcon.iconAnchor = new GPoint(33,190); myIcon.infoWindowAnchor = new GPoint(33,0); myIcon.imageMap = [4...0]; //omesso per questioni di spazio
Per poter utilizzare l’icona dobbiamo modificare leggermente la riga dove viene creato il marker:
//Create marker:
marker = new GMarker(home, {icon:myIcon});
Abbiamo infatti aggiunto l’opzione icon che permette di specificare quale icona utilizzare.
Se visualizzamo quest’ultimo esempio vedremo una simpatica icona al posto del consueto pallino rosso.
Bello vorrei inserirlo nel mio sito si vede tutto fuorchè la mappa.
Ho preso il demo uno ho inserito la key google
la form mi esce anche un’ iconetta di google il resto foglio bianco.
Dove sbaglio?
Ciao Franco,
Difficile dire qual’è il problema. Per prima cosa potresti postare un link alla pagina in modo da vedere direttamente dove non funziona.
Se non la conosci puoi anche installare l’estensione di firefox “firebug” che ti permette di vedere in dettaglio gli errori javascript.
Finalmente una guida passo passo
Grazie
Daniele
Funziona alla grande!!! Grazie!
Solo un appunto:
non c’è un suggeritore di risposte quando viene inserito un indirizzo non riconosciuto.
Ad esempio ho provato a scrivere come luogo di partenza: “aeroporto di Firenze” – non viene riconosciuto. Non solo non viene visualizzato nessun risultato (ovvio), ma nemmeno un messaggio che dice: “indirizzo non riconosciuto, riprovare”, o -e sarebbe ancora più bello – “intendevi forse: Firenze Peretola, 50127 Firenze, Italia ?”
perche qui ce anke streetview http://www.ubuy1realty.com/index.php?option=com_realestate&tst=h&add=2612%20Avenue%20Y&city=%20Brooklyn&state=%20NY%2011235&type=COOP&action=view_property_details&imag=http://thumbs.trulia.com/pictures/thumbs_3/ps.12/f/3/8/1/picture-uh=5b1ee6eb2ddbb438aa03243ffc44146-ps=f38148271c15d64159b1115777a9c2.jpg&descr=2612%20Avenue%20Y,%20Brooklyn,%20NY%2011235,%20$749,000%205%20beds%203%20baths%20#street_view
E’ strano: ho copiato il codice dal demo1 (copiato per intero) sostituendo solo la key di maps: non fa vedere neanche a me la mappa, tutto il resto si.
ho installato anche mozilla firebug… invano.
@Elena: Per integrare ulteriori funzioni basta consultare le API messe a disposizione da Google, in questo esempio ho voluto implementare le funzionalità basilari.
@aaa: Stesso discorso, sono state utilizzate pesantemente le API di google per realizzare un sistema altamente personalizzato.
@Andrea e @franco: riuscite a mettere on-line la pagina che vi crea problemi ed indicare il link così da poter verificare direttamente?
assolutamente si… ad esempio http://www.vabes.com/dove3.html
Ah ecco ora è chiaro: devi dare una dimensione in altezza al DIV contenente la mappa.
ahahahahah… son proprio una frana!!! Grazie!