- Piccoli Ingegneri Crescono -

Aggiungere Google Maps ad una pagina web

Da PicIngCre.

Introduzione

Scopo

In questo How-to vedremo come incorporare il celebre servizio Google Maps ad una pagina web. Il codice è allineato alle seconda versione della API di Google Maps.

Occorrente

  • Sito web funzionante.
  • API Key di Google Maps.

Pro

E un bel modo per arricchire il proprio sito web per segnalare posti che vi interessano.

Contro

Per adesso non ne ho trovati

Indice

Articolo

In questo articolo vedremo come strutturare una pagina web per poter inserire le mappe di Google Maps all'interno di un sito.

Preliminari

Il servizio è 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://picingcre.netsons.org/) 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.

Inserire il codice HTML

Il codice HTML che occorre inserire nella pagina si riduce ad un elemento div che funge da segnaposto per la mappa. All'interno del div è stato inserito un avviso nel caso il codice di Javascript non possa essere eseguito. 
<div id="map" style="width: 650px; height: 500px">
  Your browser doesn't support Google Maps or Javascript is turned off.
</div>
Inoltre, dovremo 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()">

Inserire il codice Javascript

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 Lecce e impostare uno zoom di fattore tredici 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 Lecce, con uno zoom di 13 
            map.setCenter(new GLatLng(40.353347, 18.173962), 13);
        }
    }
    //]]>
</script>
Per poter cambiare la località da visualizzare nella mappa basta modificare le coordinate da passare alla funzione GLatLng, queste si possono ricavare andando su Google Maps oppure ricavandole da Google Earth.

Aggiunta di un marker

Vediamo ora come aggiungere un marker per individure un punto sulla mappa e associarci una descrizione.
Innanzi tutto all'interno di showMap scriviamo una funzione di utilità chiamata createMarker. Questa raggruppa il codice necessario per creare un nuovo oggetto GMarker (doc) e associare a questo un handler per l'evento click. Visto che vogliamo far apparire una descrizione quando il marker viene cliccato nell'handler invocheremo il metodo GMarker.openInfoWindowHtml, passandogli del testo tramite la variabile description. 
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;
        }
    }
}
Ora non ci resta che chiamare la funzione createMarker, passandogli coordinate e descrizione per il nostro marker. Il codice seguente va inserito dopo il corpo di createMarker ma sempre all'interno di showMap. 
function showMap()
{
    if (GBrowserIsCompatible()) {
 
        // codice di setCenter, ecc.        
        // codice di createMarker
 
        map.addOverlay(
            createMarker(new GLatLng(40.353347,18.173962), "<b>Lecce</b>")
        );       
    }
}
Il codice crea una mappa simile a questa. Come si può constatare il marker è cliccabile e la descrizione viene interpreata dal browser come codice HTML.
Si possono creare quanti marker si desideri, è sufficiente chiamare createMarker con delle nuove coordinate e di seguito Gmap2.addOverlay per aggiungere il nuovo oggetto alla mappa.

Conclusione

Siamo arrivati alla fine di questo tutorial ma siamo solo all'inizio dell'esplorazione di Google Maps. Le possibilità di utilizzo e personalizzazione del servizio sono pressoché illimitate ma è evidente che per utilizzi più spinti è richiesta una buona conoscenza di Javascript e delle classi documentate.

Riferimenti

Scrnet
Estratto da "http://picingcre.netsons.org/wiki/index.php?title=Aggiungere_Google_Maps_ad_una_pagina_web"
Contatti
Chi siamo
Strumenti