Utilizzare le API di Google per la visualizzazione di mappe interattive all’interno del proprio sito web è un’operazione relativamente semplice. È però possibile spingersi oltre il normale utilizzo di queste per ottenere risultati straordinari. In questo articolo viene descritto come è possibile inserire, all’interno di un sito web, una pagina in cui oltre alla visualizzazione della mappa, vengono forniti gli strumenti necessari per poter calcolare automaticamente il percorso (tramite immissione di dati da parte dell’utente).

Per prima cosa è necessario essere in possesso di una API Key (ricordiamo che è possibile utilizzarne non più di una per dominio). Il primo obiettivo è creare la pagina web contenente la mappa. All’interno del tag head dobbiamo inserie del codice simile a questo:

<script 
    src="http://maps.google.com/maps?file=api&v=2.x&
    key=<La tua API Key qui>"    
    type="text/javascript">
</script>

in grassetto è specificata la posizione in cui inserire la chiave.

Poi è necessario inserire un div (dimensione variabile a vostro piacere) in cui verrà caricata la mappa e una funzione Load() che deve essere richiamata nel caricamento della pagina

<body onload="load()" onunload="GUnload()">
    <div id="map" style="width:400px; height: 400px"></div>
<body>

Il codice necessario per il corretto funzionamento lo si trova qui:

<script type="text/javascript">
var map = null;
var geocoder = null;

function load() {
  if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
        var geocoder = new GClientGeoCoder();
        map.setCenter(geocoder.getLatLng("Matera, 75100 Italy"), 7);
  }
}
</script>

Aggiornamento: su suggerimento di Sandro Modarelli ho pensanto di utilizzare i suoi consigli direttamente qui rimpiazzando il vecchio map.setCenter(new GLanLng(...)) con GClientGeocoder(). Tutti i sorgenti di esempio sono stati aggiornati, grazie Sandro!

Le coordinate impostate in questa mappa (map.setCenter(new GLatLng(41.442726, 12.392578), 5);) puntano sulla mia città, Matera. Il numero finale, 7 indica il livello di Zoom da applicare per la visualizzazione della mappa. Con GSmallMapControl() aggiungiamo gli strumenti per lo Zoom diretto, con GMapTypeControll aggiungiamo i tasti necessari a visualizzare la mappa in modalità satellitare o meno.

Ora dobbiamo creare un Marker utile a visualizzare un fumetto sulla mappa che mostri informazioni aggiuntive sul punto che si sta visualizzando. Estendiamo la funzione load inserendo subito dopo il metodo map.setCenter il codice che segue:

var marker = new GMarker(new GLatLng(41.442726, 12.392578));
map.addOverlay(marker);
marker.openInfoWindowHtml("<strong>Matera</strong> - Citta dei Sassi.");

La mappa con il marker verrà disegnata nel div map. Ora possiamo aggiungere alla stessa pagina un form in cui l’utente può inserire l’indirizzo di partenza ed un’altro div in cui, una volta calcolato il percorso, verranno inserite le informazioni per raggiungere la meta.

<div id="localita">
    <form action="#" onsubmit="setRoute(this.locationFrom.value); 
                    return false">
       <label for="locationFrom">Indica il punto di partenza:</label>
       <input type="text" name="locationFrom" id="locationFrom" /gt;
       <input type="submit" value="Calcola percorso" />
    </form>
</div>
<div id="itinerario"></div>

Abbiamo creato un form per permettera all’utente di inserire la località di partenza di partenza ed un div in cui verranno stampate le indicazioni. Nel form è stata specificata la funzione onsubmit="setRoute(this.locationFrom.value)" che viene implementata di seguito:

function setRoute(from) {
    locale="it";
    gdir.load("from: " + from + " to: Matera, 75100 Italy");
}

Ho prima di tutto specificato con quale lingua devono essere fornite le indicazioni (locale="it"), poi ho passato indirizzo di partenza e di arrivo (From To), per rendere il servizio funzionante è necessario modificare la funzione load() inserendo una istruzione:

gdir = new GDirections(map, document.getElementById("itinerario"));

Abbiamo passato l’oggetto mappa ed il contenitore predisposto per visualizzare l’itinerario. Per finire è possibile implementare un piccolo gestore degli eventi per intercettare eventuali errori e informare l’utente in questo modo:

GEvent.addListener(gdir, "error", managedErrors);

ogni qual volta si verifica un errore, questo viene passato alla funzione managedErrors

function managedErrors(){
 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");
}

Per rendere più chiara l’idea, di seguito è mostra lo script completo:

<html>
 <head>
  <script 
   src="http://maps.google.com/maps?file=api&v=2.x&
   key=<La tua API Key qui>"    
   type="text/javascript">
  </script>
  <script type="text/javascript">
   var map;
   var gdir;
   var geocoder = null;
   var addressMarker;

   function load() {    
    if (GBrowserIsCompatible()) {
     map = new GMap2(document.getElementById("map_canvas"));
     map.addControl(new GSmallMapControl());
     map.addControl(new GMapTypeControl());
     var geocoder = new GClientGeoCoder();
     map.setCenter(geocoder.getLatLng("Matera, 75100 Italy"), 7);
		
     var marker = new GMarker(geocoder.getLatLng("Matera, 75100 Italy"));
     map.addOverlay(marker);
     marker.openInfoWindowHtml
     (
	"<strong>Matera</strong> - Citta dei Sassi."
     );
     
     gdir = new GDirections(map, document.getElementById("itinerario"));
     GEvent.addListener(gdir, "error", managedErrors);
    }
   }
    
   function setRoute(from) {
    locale="it";
    gdir.load("from: " + from + " to: Matera, 75100 Italy");
   }

   function managedErrors(){
    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>       
  </head>
  <body onload="load()" onunload="GUnload()">
   <div id="map" style="width: 400px; height: 400px"></div>
    <div id="localita">
     <form action="#" onsubmit="setRoute(this.locationFrom.value); 
              return false">
     <label for="locationFrom">Indica il punto di partenza:</label>
      <input type="text" name="locationFrom" id="locationFrom" /gt;
      <input type="submit" value="Calcola percorso" />
     </form>
     </div>
   <div id="itinerario"></div>
 </body>
</html>

Spero questo script sia utile a voi tanto quanto lo è stato per me!