Script ajax: Calcolare il percorso con google maps sul sito
difficoltà:
Script simili
5/4/2009
Attraverso questo script sarà possibile visualizzare un punto sulla mappa google maps sul vostro sito. Sarà inoltre possibile calcolare direttamente sul sito il percorso, con tanto di indicazioni e tragitto, per arrivare a destinazione da qualunque punto di partenza inserito direttamente dall'utente.
Per prima cosa ricordiamoci di ottenere una API Key che possiamo prelevare da qui:
http://www.google.com/apis/maps/signup.html
ogni key potrà essere usata per un solo dominio.
Inseriamo ora la mappa nel sito. Indicando le coordinate su cui centrare la mappa, il punto in cui inserire un marker, con tanto di popup descrittiva dell'attività commerciale e dell'indirizzo.
Queste sono cose che abbiamo già visto in passato e su cui non mi soffermerò. Per maggiori info:
Inserire una mappa di google maps nel proprio sito
Visualizzare sul proprio sito un indirizzo con Google maps
Con questo script inseriremo la mappa centrata sull'indirizzo 'Corso Buenos Aires 14, 20129 Milano' a zoom 13, con marker(segnaposto) e popup che descrive il luogo:
<body onload="initialize()" onunload="GUnload()">
<script src=" http://maps.google.com/?file=api&v=2.x&key=INSERIRE_KEY_API" type="text/javascript"></script>
<script type="text/javascript">
var map;
var gdir;
var geocoder = null;
var addressMarker;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(45.476744,9.20738), 13);
var marker = new GMarker(new GLatLng(45.476744,9.20738))
map.addOverlay(marker);
marker.openInfoWindowHtml("<b>Nome Negozio</b><br>Corso Buenos Aires 14<br>20129 Milano");
}
}
</script>
<div id="map_canvas" style="width: 420px; height: 400px"></div>
</body>
La mappa verrà inserita nel div map_canvas.
Ora aggiungiamo alla pagina un form in cui l'utente potrà inserire l'indirizzo di partenza e un div che accoglierà la descrizione del percorso. Questo div inizialmente sarà vuoto.
<div id="map_canvas" style="width: 420px; height: 400px"></div>
<div id="location">
<form action="#" onsubmit="setDirections(this.partenza.value); return false">
parti da:<input type="text" name="partenza"><input type="submit" value="Calcola">
</form>
</div>
<br>
<div id="directions" style="width: 420px"></div>
Il div map_canvas conterrà la mappa, location il form, directions la descrizione del tragitto.
Come vediamo il form passerà l'indirizzo di partenza (il campo partenza per l'appunto) alla funzione setDirections.
La funzione setDirections sarà questa:
function setDirections(fromAddress) {
locale="it";
gdir.load("from: " + fromAddress + " to: Corso Buenos Aires, 14, 20129 Milano");
}
Bisogna per prima cosa segnalare la lingua in cui saranno date le indicazioni, questo influenza anche il modo di inserimento degli indirizzi.
Poi si dovrà passare l'indirizzo di partenza e quello di arrivo(che sarà quello della nostra attività).
Per far funzionare il tutto basterà aggiungere alla funzione initialize la definizione di gdir:
gdir = new GDirections(map, document.getElementById("directions"));
a GDirections vanno passati l'oggetto mappa e l'elemento html in cui inserire le indicazioni del percorso.
L'ultima cosa che si puo' fare a questo punto è gestire possibili errori.
Aggiungiamo alla funzione initialize:
GEvent.addListener(gdir, "error", handleErrors);
che catturerà gli eventi errore e richiamerà la funzione handleErrors che verificherà il tipo di errore riscontrato.
Ecco un esempio di handleErrors:
function handleErrors(){
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
alert("Indirizzo non trovato");
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
alert("Si è verificato un errore nella geocodifica degli indirizzi");
else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
alert("Manca un parametro");
else if (gdir.getStatus().code == G_GEO_BAD_KEY)
alert("Errore nella Key Api.");
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert("La richiesta non puo' essere correttamente risolta.");
else alert("Si è verificato un errore");
}
Prima di vedere il codice completo vediamo il risultato:
E questo lo script completo:
<body onload="initialize()" onunload="GUnload()">
<script src=" http://maps.google.com/?file=api&v=2.x&key=INSERIRE_KEY_API" type="text/javascript"></script>
<script type="text/javascript">
var map;
var gdir;
var geocoder = null;
var addressMarker;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(45.476744,9.20738), 13);
var marker = new GMarker(new GLatLng(45.476744,9.20738))
map.addOverlay(marker);
marker.openInfoWindowHtml("<b>Nome Negozio</b><br>Corso Buenos Aires 14<br>20129 Milano");
gdir = new GDirections(map, document.getElementById("directions"));
GEvent.addListener(gdir, "error", handleErrors);
}
}
function setDirections(fromAddress) {
locale="it";
gdir.load("from: " + fromAddress + " to: Corso Buenos Aires, 14, 20129 Milano");
}
function handleErrors(){
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
alert("Indirizzo non trovato");
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
alert("Si è verificato un errore nella geocodifica degli indirizzi");
else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
alert("Manca un parametro");
else if (gdir.getStatus().code == G_GEO_BAD_KEY)
alert("Errore nella Key Api.");
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert("La richiesta non puo' essere correttamente risolta.");
else alert("Si è verificato un errore");
}
</script>
<div id="map_canvas" style="width: 420px; height: 400px"></div>
<div id="location">
<form action="#" onsubmit="setDirections(this.partenza.value); return false">
parti da:<input type="text" name="partenza"><input type="submit" value="Calcola">
</form>
</div>
<br>
<div id="directions" style="width: 420px"></div>
</body>
Permalink:
Tag:
Script Simili:
Script ajax: Inserire una mappa di google maps nel proprio sito
Script ajax: Visualizzare sul proprio sito un indirizzo con Google maps
Script ajax: Trovare la posizione di un IP su google maps
Script ajax: Caricare su Google maps coordinate da xml o feed rss con georss
Link utili:
Vota:
Commenti
24/9/2009 12:18:15
Ciao. I toi script sono utilissimi!!
Mi chiedevo se fosse possibile creare una mappa con possibiità di calcolo del percorso (come in questo script) inserendo anzichè il solito marker un segnaposto creato da noi.
1/2/2010 14:22:38
Se dovessimo invece inserire un percorso ???
Ma non stradale, bensi aereo...
Quale strada è necessario utilizzare ?
Mi spiego meglio. In un file ho delle coordinate, che prese una ad una funzionano perfettmaente nella mappa...
Ma come faccio a vedere sulla mappa il mio percorso ??
Tenendo presente che non è stradale bensì aereo ??
grazie
Enrico
29/3/2010 14:24:45
Ciao, a me interesserebbe sapere come restituire risultati in italiano invece che in inglese. Le indicazioni stradali vengono infatti fornite in inglese nonostante sia impostato it, qualche errore?
8/4/2010 10:43:48
Lo script è eccezionale...grazie, per i risultati in italiano ho fatto varie prove...ma niente. Se qualcuno ha la soluzione lo ringrazio anticipatamente.
29/6/2010 0:07:07
se cambio le coordinate non funziona bene....in cosa sto sbagliando???
25/8/2010 10:25:34
Forse dovreste un po' tutti imparare come si chiede aiuto specificando quale errore avete e cosa avete avete fatto!
scrivere:
"se cambio le coordinate non funziona bene....in cosa sto sbagliando???"
non serve a niente e non riceverà mai una risposta!
Feed Rss
2/6/2009 18:21:39
ciao! mi interessa molto questo script, ma senti, c'è la possibilità di assegnare ad una variabile, la distanza fra i due punti?
grazie
Piero