3.2 Visualizzatori territoriali della famiglia Google
3.2.5 Pubblicazione su Web di mappe dai contenuti geografici
3.2.5.1 Google Maps Mashup
La possibilità di pubblicare mappe su Web è stata resa possibile da quando Google ha pubblicato le sue API20. Da quel momento sono nate sul Web una serie di applicazioni chiamate map mashup che usano Google Maps come piattaforma e ad essa collegano dati provenienti da ogni genere di database (per esempio immagini da Flickr, video da YouTube, etc.).
In pratica, la grande novità offerta da Google è stata quella di permettere un collegamento tra elementi geometrici georeferenziati sulla mappa e dati di qualsiasi tipo (immagini, video, documenti, etc.) in modo da creare un unico sistema e un’unica applicazione visualizzabile nella propria pagina Web.
Quello che serve per creare un mashup Google è conoscere il linguaggio html e JavaScript.
Per poter creare un map mashup e quindi pubblicare le proprie mappe su Internet si possono utilizzare più metodi.
Uno di questi è utilizzare la funzione “Le mie mappe” presente in Google Maps, che non è altro che un mashup molto semplice.
Per utilizzare la funzione è necessario avere un account Google e, una volta effettuato il login, è possibile disegnare sulla mappa un segnaposto, una linea o una forma (rispettivamente un punto, una linea o un poligono). Ad ogni elemento può essere associata una foto, un video o un collegamento ad un’altra pagina Web semplicemente includendo nella finestra delle informazioni il link alla risorsa21.
20
API è l’acronimo di Appication Program Interface, una serie di routines basate su librerie che estendono le funzioni del linguaggio di programmazione.
21 Per costruire una mappa in Google Maps con la funzione “Le mie mappe” è importante che
Figura 15 – La funzione “Le mie mappe” di Google Maps
La mappa può essere già condivisa22 e modificata da altri utenti, mandando per email o con un instant messenger il collegamento alla mappa creata, che risiede sui server Google.
Se si vuole, invece, inglobare la mappa in una propria pagina Web è necessario includere in essa il corrispondente codice html fornito da Google.
Figura 16 – Il tematismo creato dallo shapefile delle acque di Bologna in Google Maps
22 La pubblicazione della mappa può essere pubblica, quindi visibile a tutti gli utenti, oppure
Un altro metodo per includere in un sito Web una mappa Google Maps è quello di utilizzare Google Maps API23, strumento di sviluppo che permette di aggiungere alla mappa Google altri elementi grafici. Per usare Google Maps API è necessario avere un account Google e chiedere una chiave API (API Key)24. Una volta ottenuta la licenza da Google, si può procedere alla creazione della mappa.
Si crea quindi una pagina html in cui verranno inclusi 3 blocchi di codice JavaScript.
Un blocco sarà contenuto nel tag head del documento html e gli altri due nel tag body.
In particolare nell’head andrà posizionato il seguente blocco di codice per far funzionare due script all’interno del sito Web:
<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript"> </script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(LATITUDE, LONGITUDE), ZOOM); }
} //]]> </script>
dove:
• al posto dell’APIKEY è necessario inserire il codice rilasciato da Google;
• al posto di LATITUDE e LONGITUDE è necessario inserire i valori esatti
di latitudine e longitudine del punto centrale della mappa che si vuole visualizzare all’interno del sito;
• ZOOM è un valore di zoom della mappa che va da 0 a 17.
Nel tag <body> è invece necessario aggiungere gli eventi onload e unload come mostrato di seguito:
<Body onload="load()" onunload="GUnload()">
e inserire all’interno del tag Body del documento la seguente linea per includere la mappa al documento html:
23 <http://code.google.com/intl/it/apis/maps/>[Accesso: marzo 2009]
<div id="map" style="width: 500px; height: 300px"></div>
dove
• width definisce la larghezza della mappa;
• height definisce l’altezza della mappa.
Per aggiungere dei punti nella mappa realizzata è necessaria la seguente linea di codice dopo la linea map.setCenter:
var point = new GLatLng(LATITUDE,LONGITUDE) map.addOverlay(new GMarker(point));
oppure se si decide di utilizzare elementi grafici che sono già contenuti in un file kml bisogna includere nell’header il blocco di codice che segue come ultima riga della funzione load:
var geoXml = new GGeoXml("URL"); map.addOverlay(geoXml);
dove con URL si intende il link al file kml. Link che necessariamente può portare solo ad un server e non può essere in locale.
Quindi per creare una mappa che contenga un punto è necessario scrivere in un file html le seguenti linee di codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft- com:vml"> <head> <script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript"> </script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(44.4915325228 ,11.3402453516), 12); var point = new GLatLng(44.4915325228 ,11.3402453516)
map.addOverlay(new GMarker(point)); } } //]]> </script> </head>
<div id="map" style="width: 500px; height: 300px"></div> </body>
e il browser restituirà la seguente immagine.
Figura 17 - Utilizzo di Google Maps API