Italiano   English

Maps Google


Il servizio Google Maps è disponibile gratuitamente ma occorre avere una API Key, ovvero un codice alfanumerico che identifica univocamente l'URL (o una sottopagina di questo URL) che andrà ad utilizzare le mappe.
È possibile richiedere una API Key tramite la pagina Sign up for the Google Maps API, indicando l'indirizzo per il quale si ha intenzione utilizzare il servizio (per es. http://www.guidalsoftware.com/) e cliccare Generate API Key. Verrà generata una stringa di lettere e numeri piuttosto lunga, è consigliabile tenerla a portata di mouse, ci servirà a breve.
Il  codice  HTML  che  occorre  inserire   nella pagina si riduce ad un elemento div che funge da segnaposto per la mappa (la larghezza e l'altezza la scegliete a vostro piacimento).

<div id="map" style="width: 350px; height: 220px"></div>

Copiamo nell'elemento head della pagina la linea seguente

<script src="http://maps.google.com/maps?file=api&v=2&key=API-KEY-QUI" type="text/javascript"> </script>

La dicitura API-KEY-QUI va sostituita con la API Key vera e propria. Questo blocco script che punta al sito di Google ha il compito di importare nella pagina tutto il codice Javascript necessario per gestire le mappe.
Il secondo blocco di Javascript da aggiungere è quello che verrà intergrato più avanti con le istruzioni per personalizzare la mappa. Per il momento la funzione showMap si limita a creare la mappa, centrarla su Roma e impostare uno zoom di fattore cinque utilizzando il metodo GMap2.setCenter (doc).  

<script type="text/javascript">
      //<![CDATA[
      function showMap()
      {
         if (GBrowserIsCompatible())
         {
          // Ottiene l'elemento della pagina chiamato "map" (il DIV) e crea la mappa utilizzandolo come contenitore.
          var map = new GMap2(document.getElementById("map"));

         // Aggiunge dei controlli per lo zoom e lo spostamento
         map.addControl(new GSmallMapControl());

         // Centra la mappa su Roma, con uno zoom di 5
         map.setCenter(new GLatLng(41.896655,12.495918), 5);
         }
       }
       //]]>
</script>

Il procendimento per ricavare, tramite Google Maps, i valori di latitudine 41.896655 e longitudine 12.495918 di Roma è il seguente: una volta individuato il punto nella mappa che ci interessa doppioclicchiamoci sopra, la mappa verrà centrata sul punto cliccato ed il link mostrato in Collegamento a questa pagina avrà un indirizzo simile a http://maps.google.com/maps?f=...ll=41.896655,12.495918...om=1.
Il valore del parametro ll sono le coordinate da dare in pasto all'oggetto GLatLng che centreranno la mappa sul punto desiderato.
L'ultimo passaggio consiste nell'istruire il browser su cosa fare durante il caricamento e lo "scaricamento" della pagina. Aggiungiamo quindi a body i due attributi onload e unload.
Il primo si occuperà di chiamare la nostra funzione showMap, il secondo invocherà la funzione GUnload di Google Maps quando il browser lascia la pagina che contiene la mappa.


<body onload="showMap();" onunload="GUnload()">

Ora vediamo come aggiungere un marker per individure un punto sulla mappa e associarci una descrizione.
All'interno di showMap scriviamo una funzione di utilità chiamata createMarker. Questa raggruppa il codice necessario per creare un nuovo oggetto GMarker e associare a questo un handler per l'evento click. Visto che vogliamo appaia una descrizione quando il marker viene cliccato nell'handler invocheremo il metodo GMarker.openInfoWindowHtml, passandogli del testo tramite la variabile description. Richiamiamo la funzione createMarker, passandogli coordinate e descrizione per il nostro marker.

function showMap()
  {
    if (GBrowserIsCompatible())
     {
        //codice di setCenter, ecc.

       //Crea un nuovo marker nel punto specificato con una descrizione HTML associata
        function createMarker(point, description)
        { var marker = new GMarker(point);
          GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(description); });
          return marker;
         }
         map.addOverlay( createMarker(new GLatLng(41.896655,12.495918), "<b>Roma</b>, Italia") );
     }
   }


Ora non ci resta che ricaricare la pagina e gustarci il frutto del nostro lavoro.
Ovviamente questo è solo l'inizio dell'esplorazione di Google Maps. Le possibilità di utilizzo e personalizzazione del servizio sono illimitate.
 

Altri tutorial/guide della categoria "Web Developer"

Database e IIS7 - Errore su server locale

Recentemente mi sono imbattuto in un nuovo errore legato a pagine web .asp che accedono a un database. La sintassi dell’errore è la seguente "An error occurred on the server when processing the URL. Please contact the system administrator" [continua...]

Database e IIS 7

Una volta installato l’IIS 7 su un pc con Microsoft Windows Vista ci si rende conto che le pagine con estensione .asp collegate con un database generano una serie di errori incomprensibili quali "Microsoft JET Database Engine error 80004005 - Errore non specificato.", pagina non trovata, accesso negato o altro che in sintesi non vi permette di visualizzare correttamente il contenuto della vostra pagina .asp [continua...]
Email: info@free-download.it