Dopo il primo appuntamento con l’ introduzione alle Google Maps, eccovi il secondo capitolo sulle API di Google Maps in cui parleremo di come creare una mappa.
Come sempre in fondo alla pagina trovate il pdf scaricabile.
Iniziamo!
Per avere una visione migliore facciamo un esempio.
<!DOCTYPE html “-//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”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Google Maps JavaScript API Example</title>
<script src=”http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true_or_false”
type=”text/javascript”></script>
<script type=”text/javascript”>function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map_canvas”));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
}
}</script>
</head>
<body onload=”initialize()” onunload=”GUnload()”>
<div id=”map_canvas” style=”width: 500px; height: 300px”></div>
</body>
</html>
Questa è una pagina html che contiene la mappa di Palo Alto in California ed è grande 500 pixel per 300 pixel.
Per prima cosa abbiamo incluso un file javascript esterno che ci fornirĂ tutte le funzioni che potremo utilizzare.
Nell’URL (l’indirizzo a cui si riferisce il file) dovremo inserire la nostra API Key in questa parte qui : key=abcdefg , dove al posto di abcdefg inseriremo la API Key ottenuta in precedenza.
<script src=”http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true_or_false” type=”text/javascript”></script>
Poi bisogna creare la funzione initialize() . Successivamente, nel tag body inseriremo gli eventi onLoad=”initialize()” e onUnload=”GUnload()”.
Function initialize(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map_canvas”));
var ll = new GLatLng(37.4419, -122.1419);
map.setCenter(ll, 13);
map.setUIToDefault();
}}
La funzione GBrowserIsCompatible() restituisce true se il browser del client(colui che visita il sito) è compatibile con le API di Google Maps perché trattandosi di javascript potrebbe avere problemi di visualizzazione con i browser meno recenti o di chi ha javascript disattivato.
La variabile map istanzia una nuova classe GMap2(), creando una nuova mappa all’interno del tag div specificato attraverso l’attributo id.
La variabile ll istanzia una nuova classe GLatLng(latitudine,longitudine), a cui dovremo passare la variabile di latitudine e longitudine; questa nuova classe contiene tutti i metodi e le proprietĂ relativi alle coordinate terrestri.
Adesso entra la programmazione orientata agli oggetti, chiamando la funzione associata all’oggetto, in questo caso la variabile map.
Attraverso la funzione set Center(ll,zoom) è possibile centrare la mappa sulle coordinate e zoomare quanto si vuole, scegliendo un valore tra 1 e 20.
L’ultima funzione setUIToDefault() associa alla tua Google Map l’interfaccia grafica standard, quella che si visualizza anche sul sito di Google Maps.
Finisce qui il capitolo su come creare la mappa.
Tutti vi chiederete, si ho la mappa, e le coordinate come le trovo? Questo sarĂ l’argomento del prossimo capitolo. Alla prossima 
!
Di seguito il pdf scaricabile di questo capitolo.
Guida alle API di Google Maps – Capitolo 2 – Iniziamo a creare le mappe
 |
Creare la mappa |
please send me html
maps roma
via della tre fontane, roma
only html thank
ok
i sent you and email