Le mappe di Google sono uno strumento potentissimo per georeferenziare attività e punti di interesse. Sono state adottate su moltissimi siti web come sostituto o integrazione per la sezione 'Dove siamo' ma le possibilità di utilizzo vanno ben oltre la semplice visualizzazione aerea di un'area geografica.
Fino ad ora un utilizzo più professionale e personalizzato di questo strumento era possibile solo utilizzando in modo consistente le API messe a disposizione da Google e quindi mettendo pesantemente mano al codice JavaScript all'interno delle proprie pagine. Ad esempio posizionare dei POI (i punti di interesse) tramite un'icona personalizzata, delle aree colorate o dei percorsi lineari all'interno della propria mappa risultava abbastanza complicato. Così inserire nel proprio blog una mappa che, ad esempio, georeferenziasse i punti dove erano state scattate le foto e che segnasse il percorso seguito nella nostra ultima passeggiata in montagna era una prerogativa per soli programmatori.
Da quando è stata attivata la sezione Le mie mappe su Google Maps è possibile una personalizzazione e una integrazione delle mappe più completa e alla portata di tutti, anche degli utenti meno esperti.
Cosa serve per iniziare?
Per utilizzare le mappe di Google Maps occorre avere un account Gmail. La registrazione apre l'accesso ad una serie di servizi gratuiti offerti da Google che vanno dall'account di posta elettronica alle mappe, dal calendario ai documenti e fogli di calcolo online e molto altro.
Per integrare una mappa sul proprio sito prima di tutto bisogna possedere una chiave di registrazione (API key). Per ottenerla cliccate qui e compilate il form come in figura.
Ogni chiave è relativa ad una directory del vostro sito, quindi se la vostra mappa dovrà essere inclusa ad esempio nella pagina http://www.miosito.com/dovesiamo/mappa.html dovrete inserire nel form il link: http://www.miosito.com/dovesiamo/
Il risultato dell'invio del form è una pagina dove viene indicata la chiave (API key) che è stata generata: tenetela da parte, la utilizzeremo tra poco. Più in basso, nella stessa pagina, viene proposto il codice da cui partire per includere la mappa all'interno della propria pagina HTML.
Integrare sul proprio sito una mappa base
Utilizzando il codice HTML proposto durante la creazione della chiave come punto di partenza per integrare la mappa all'interno del nostro sito abbiamo già parte del lavoro fatto. È interessante comunque analizzare le sezioni del codice per comprendere i meccanismi e adattarli ai nostri scopi.
Il primo tag script che incontriamo utilizza come parametro, tra gli altri, la chiave generata per validare la mappa relativamente alla url del vostro sito (il codice è spezzato su più righe per ragioni di formattazione e leggibilità):
<script src="http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAAqJTkrAjlGEQ5_cEfzzAJgRRAZ9mlzEjjCKJrrF-8_EGHWK0_0hQ923jZ3TjALaquxxdHQjW2CSJQRA"
type="text/javascript">
</script>
Il secondo tag script contiene una funzione JavaScript che viene lanciata al caricamento della pagina HTML (tramite l'istruzione onload presente all'interno del tag body) e che genera la mappa all'interno dell'elemento che ha id="map", un div che si trova all'interno del corpo della pagina al quale possiamo dare le dimensioni che ci interessano impostando i valori di width e height:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(41.9107,12.4763), 15);
}
}
È presente in questo script anche una riga che posiziona geograficamente la mappa centrandola ad un valore di latitudine e longitudine (i due valori decimali associati alla funzione GLatLng) e imposta lo zoom al valore 15 (più è alto questo valore più la visualizzazione è ravvicinata).
Per trovare i valori di latitudine e longitudine che vi interessano potete utilizzare il programma Google Earth (la versione gratuita può essere scaricata qui).
È anche possibile recuperare questi valori direttamente dalla URL di Google Maps leggendo i valori associati al parametro ll. Per farlo, effettuate una ricerca geografica e spostate la mappa fino al punto che vi interessa poi cliccate sul link Collegamento a questa pagina, quindi analizzate la url raggiunta dal browser. Non spaventatevi se è piena di sigle e numeri, ha una sua logica: dopo l'indirizzo web c'è un punto interrogativo e poi una serie di coppie parametro = valore separate dal carattere &. Individuate il punto dove c'è &ll=, subito dopo il carattere di uguaglianza troverete una coppia di numeri decimali separati dalla virgola, sono i valori di latitudine e longitudine che cerchiamo!
Ma dove verrà visualizzata la nostra mappa? All'interno del body della pagina HTML dovrà essere presente un div vuoto che abbia come id il valore map e che abbia delle dimensioni definite a piacimento, più semplice a farsi che a dirsi:
<div id="map" style="width:640px; height:480px; border:1px solid black;"></div>
Potete assegnare al div anche altri valori di stile, come ad esempio un bordo. Tramite la chiamata a getElementById(map) passata come parametro a GMap2 lo script utilizzerà questo div come contenitore per la mappa generata.
Mappa personalizzata
Una volta aggiunta la mappa alla pagina web e dopo che è stata centrata tramite latitudine e longitudine nella posizione che ci interessa possiamo iniziare a personalizzarla.
L'idea che sta alla base di questo meccanismo è quella di sovrapporre alla mappa uno strato che contiene informazioni aggiuntive. Su http://maps.google.com cliccate su Le mie mappe, visualizzerete una mappa di Google con quattro controlli aggiuntivi: una mano, un segnaposto, un tracciatore di righe e uno di forme chiuse.
La mano serve per spostarsi sulla mappa, il segnaposto serve ad inserire POI (punti di interesse) personalizzati, gli altri due strumenti possono essere utilizzati per tracciare percorsi e definire aree. Ognuno di questi strumenti può essere personalizzato. Ad esempio è possibile scegliere la forma del segnaposto tra una selezione di forme e colori, lo spessore, l'opacità e il colore di righe e riempimenti. Inoltre il click destro del mouse apre un menu di contesto con ulteriori azioni.
Per i segnaposto è anche disponibile un editor di testo evoluto per cui è facile inserire contenuti formattati in HTML, contenenti link ed immagini.
Una volta che siete soddisfatti del risultato salvate la mappa (deve essere impostata come pubblica per poter essere utilizzata sul vostro sito) e copiate il collegamento del link KML presente appena sopra la mappa. Questo link punta ad un file Google Earth che, in formato XML, contiene i dati relativi ai marcatori, alle linee e ai poligoni che avete disegnato.
Il risultato finale
Avete appena creato la vostra mappa personalizzata su Google Maps, ora non rimane che sovrapporla a quella che avete creato precedentemente per il vostro sito.
Modificate la parte iniziale della funzione load() aggiungendo la variabile geoXml al vostro codice JavaScript subito dopo il controllo di compatibilità del browser:
var geoXml = new GGeoXml("http://maps.google.com/maps/ms?ie=UTF8&hl=it&msa=0&output=nl&msid=111720583234758229633.000001128a817b57e339b&output=nl");
Utilizzate all'interno della funzione GGeoXml il link KML appena copiato, quindi subito dopo la creazione della mappa aggiungete il comando per sovrapporre lo strato di informazioni personalizzate:
map.addOverlay(geoXml);
Sarà facile ottenere un risultato simile a questo:
Figuea 3 - Risultato finale
Con qualche semplice modifica al codice (in primis riguardo l'ambito delle variabili) potreste aggiungere un controllo che permetta di visualizzare/nascondere il livello personalizzato. Avete appena visto il metodo per visualizzarlo, quello per rimuoverlo è:
map.removeOverlay(geoXml);
Se siete pigri e volete che il lavoro pesante lo faccia qualcun altro potete utilizzare alcuni servizi online che, partendo dal link del file KML messo a disposizione dal Le mie mappe di Google, vi creano il codice HTML da includere nella vostra pagina web. Facile come un copia e incolla!
