Creiamo la prima mappa
La prima riga di interesse consiste nella dichiarazione di inclusione di un file JavaScript esterno:
<script src=”http://maps.google.com/maps?file=api&v=2&key=<C HIAVE>” type=”text/javascript”></script>
Al posto di <CHIAVE> va inserito l’identificativo ottenuto. Il file ottenuto contiene la definizione degli oggetti per gestire e manipolare le mappe. Il fatto che sia esterno, ovvero fornito da Google, ha due importanti implicazioni: la prima è che si dà la facoltà a Google di cambiare il contenuto delle API in qualsiasi momento (e questo è specificato nelle condizioni d’uso accettate in fase di registrazione); la seconda è che le mappe di Google sono accessibili solo quando si è connessi in rete: non è possibile usarle in pagine html visualizzare off-line.
Nella pagina c’è anche uno script locale:
function load() {
if (GBrowserIsCompatible()) {
var map = new
GMap2(document.getElementById(“map”));
map.setCenter(
new GLatLng(37.4419, -122.1419), 13
);
}
}
La funzione fa uso di oggetti e metodi specifici di Google Maps. Questi oggetti si possono riconoscere perché iniziano tutti con il prefisso G. Il primo metodo è GBrowserIsCompatible e il significato è facilmente intuibile: verifica che il browser in uso sia compatibile con la libreria (al momento la lista dei browser supportati è piuttosto nutrita: Internet Explorer 6.0, Firefox 0.8, Safari 1.2.4, Netscape 7.1, Mozilla 1.4 e Opera 8.02, comprese tutte le versioni successive). Poi ci sono le seguenti istruzioni, che contengono tre nuovi oggetti e metodi:
var map = new
GMap2(document.getElementById(“map”));
map.setCenter( new GLatLng(37.4419, -122.1419),
13
);
Nella prima viene creato un oggetto di tipo GMap2; esso accetta come parametro un elemento della pagina (il cui id è “map”; si vedrà in seguito qual è l’elemento). Successivamente, sull’oggetto creato viene invocato un setCenter: è il centro della mappa, specificato da coordinate latitudinali e longitudinali e da un numero (13). Le coordinate sono i numeri utilizzati per costruire l’oggetto GLatLng, mentre il 13 rappresenta il livello di zoom della mappa.
Quanto illustrato rappresenta tutte le informazioni necessarie per la costruzione della mappa. Quello che manca è un posto, all’interno della pagina, dove mostrare la mappa e un modo per caricare la funzione; questo è realizzato dal resto della pagina html:
<body onload=”load()” onunload=”GUnload()”>
<div id=”map” style=”width: 500px; height: 300px”></div>
</body>
Al caricamento della pagina viene invocata la funzione load e il <div> rappresenta l’elemento con id “map” sul quale verrà mostrata la mappa. È interessante notare che quando la pagina viene chiusa si invoca la funzione GUnload: essa non fa altro che eliminare eventuali oggetti creati e che certi browser non riescono a distruggere. Il suo utilizzo è sempre raccomandato.
Approfondimenti
Le librerie di Google per le mappe sono in continuo aggiornamento. Un’indispensabile fonte di informazioni sugli oggetti a disposizione e sulle loro proprietà e/o metodi è disponibile sul sito di Google in lingua inglese. In caso di dubbi specifici è la prima pagina da consultare.
Personalizzare della mappa
Dopo aver salvato la stessa pagina come secondaMappa.htm si può procedere alla sua personalizzazione. Per esempio, si potrebbe centrare la mappa sulle coordinate dell’Italia e con un livello di zoom di 5. Inoltre, è interessante mostrare, al posto della mappa, l’immagine ottenuta da Google Earth (ovvero immagini satellitari della terra). Per farlo, si deve usare il metodo setMapType:
map.setCenter(new GLatLng(42.0, 11.5), 5);
map.setMapType(G_SATELLITE_MAP);
Al posto della costante G_SATELLITE_MAP si possono usare G_NORMAL_MAP, per la mappa normale, o G_HYBRID_MAP per una mappa ibrida (ci sono elementi di entrambe le modalità; in particolare, lo sfondo è dato dall’immagine dal satellite e sono evidenziate le principali città e i confini). Il risultato della nostra personalizzazione è mostrato in figura 4.
Figura 4: la mappa centrata sull’Italia e con l’immagine dal satellite
|
