Calcolare il percorso con google maps sul sito

Posted under Script ajax di admin on venerdì 2 aprile 2010 at 12:21

Attraverso questo script sarà possibile visualizzare un punto sulla mappa google mapssul 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 partenzainserito 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.

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 leindicazioni 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>