Google Maps: calcolare itinerario

Per calcolare un itinerario e visualizzarlo sulla nostra Google Maps sarà necessario lavorare con i services messi a disposizione da Google. Dopo aver inserito la nostra mappa ed averla centrata possiamo procedere con le personalizzazioni necessarie: la prima di queste prevede l’inserimento nell’html della pagina di un secondo box, oltre a quello che ospita la mappa, dove inseriremo le “istruzioni di viaggio”:

<div id=”miamappa” style=” float:left; width:70%; height:650px;”></div>
<div id=”istruzioni” style=” float:left; width:30%; height:650px;”></div>

Nello scirpt innanzitutto modifichiamo il collegamento alla libreria specificando la lingua della risposta:

<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false&language=it”></script>

Nella parte di script vera e propria definiamo due variabili:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();

directionsService ci servirà per chiamare il servizio, mentre directionDisplay servirà per visualizzare le informazioni.

Ora la funazione che calcola il percorso:

function calcRoute() {
var start = ‘Milano’;
var end = ‘Varese, Italia’;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}

Le variabili start e end servono per stabilire i punti di partenza e arrivo, chiaramente possono esere recuperati da form, database, etc

Per il TravelMode possiamo scegliere fra driving e walking (in usa anche BICYCLING).

Le ultime istruzioni sono l’esecuzione della chiamata.

Per completare la pagina dobbiamo inizializzare la nostra mappa:

function inizializza() {
directionsDisplay = new google.maps.DirectionsRenderer();
var milano = new google.maps.LatLng(45.463681, 9.188171);
var mapOptions = {
zoom: 10,
center: milano,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map =  new google.maps.Map(

document.getElementById(“miamappa”),

mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(“istruzioni”));
calcRoute();
}

dove si deve renderizzare il percorso e nelle ultime due istruzioni scrivere il percorso nel box di destra e disegnarlo sulla mappa.

Ecco l’esempio completo.