Good2Know » GMap2 http://www.good2know.it Webmaster's blog Tue, 10 Aug 2010 17:14:29 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Guida alle API di Google Maps, iniziamo a creare le mappe http://www.good2know.it/guida-api-di-google/guida-alle-api-di-google-maps-iniziamo-a-creare-le-mappe/ http://www.good2know.it/guida-api-di-google/guida-alle-api-di-google-maps-iniziamo-a-creare-le-mappe/ #comments Wed, 13 May 2009 13:56:35 +0000 Filippo Matteo Riggio http://www.good2know.it/?p=931 logo-google-code1
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&amp;v=2&amp;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.

mappa-palo-alto
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&amp;v=2&amp;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 :D !

Di seguito il pdf scaricabile di questo capitolo.

Guida alle API di Google Maps – Capitolo 2 – Iniziamo a creare le mappe

icona-pdf12 Creare la mappa
]]> http://www.good2know.it/guida-api-di-google/guida-alle-api-di-google-maps-iniziamo-a-creare-le-mappe/ /feed 2