Script ajax: Calcolare il percorso con google maps sul sito

   difficoltà:  script script script script script

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&amp;v=2.x&amp;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:

Google maps indicazioi percorso

E questo lo script completo:
<body onload="initialize()" onunload="GUnload()">
<script src=" http://maps.google.com/?file=api&amp;v=2.x&amp;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>





Commenti


  pierissimo

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

  Rosanna

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.

  Enrico

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

  gabriele

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?

  paolo

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.

  michael

29/6/2010 0:07:07

se cambio le coordinate non funziona bene....in cosa sto sbagliando???

  Nemo

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!

  gia3

1/1/2011 20:59:39

...a me non visualizza la mappa...(ho website x5).

  Luca

10/3/2011 10:46:53

Ciao,
ho inserito lo script e funziona alla grande, solo che non riesco a capire la lingua delle indicazioni da cosa dipende, poichè io la vedo in italiano, mentre un altro mio collega da un altro pc la vede in inglese, hai qualche idea? ho provato a vedere anche in locale se cambiando la lingua dell'OS cambiava qualcosa ma non ho ottenuto nulla.
Premetto che il locale="it" è stato inserito esattamente cosi'.

  Sebastian

7/5/2011 11:03:52

Ho provato lo scrip: NON appare la mappa in Safari 3 su Mac OSX.

Su Firefox appare la mappa ma qualunque indirizzo inserito dà errore.

Sebastian

  claudio

4/5/2012 10:10:16

{locale:"it"}
va messo all'interno di gdir.load, altrimenti non funziona la lingua

gdir.load("from: " + fromAddress + " to: Corso Buenos Aires, 14, 20129 Milano",{locale:"it"});

  Simone

10/12/2013 12:05:47

Ottimo script!
Se volessi integrare il tutto con il mobile e far partire la navigazione dal punto indicato? come potrei fare?

Grazie



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.