Calcolare il percorso
con google maps sul sito
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:
..........................
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.
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:
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:
..........................
Post
