Come aggiungere google maps in una pagina web

22 luglio 2006 in Codice by Massimiliano | 2 comments

Questa cosa e' facile facile e di sicuro effetto.

La prima cosa da fare e' ottenere una google maps api key per poter usare google map sul proprio sito. La si può ottenere qui.

Nel momento in cui google ci fornisce la google maps api key, ci mostra il codice per un utilizzo di base. Lo riporto qua commentandolo giusto per capire cosa andremo a fare.
Prima di tutto importiamo le funzioni da google. Questa riga contiene la nostra key e funzionerà solamente con il dominio per il quale abbiamo ottenuto la key.

<script
    src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAZlIgpyuvZY8pz7QUTVaVVhSLYOoNmsRXdvX4J4J6dbd5jt8ogRQlK9W1V6_wnfq3Ze9Lebaq5HYVvA"
    type="text/javascript">
</script>

Ora definiamo la funzione che caricherà la mappa:

<script type="text/javascript">
    //<![CDATA[
    function load() {
        if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        }
    }
    //]]>
</script>

Queste coordinate pero' non fanno per noi, quindi andiamo su maps.google.com e cerchiamo l'indirizzo di cui vogliamo mostrare la mappe.

Una volta centrata la mappa possiamo ottenere le coordinate cliccando prima su "satellite" poi su "Collegamento a questa pagina" in alto a destra. Fatto questo troveremo le coordinate che cercavamo nell'url.

Nel mio caso: 44.137362,12.241838

Bene ora la nostra funzione diventerà :

<script type="text/javascript">
    //<![CDATA[
    function load() {
        if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            point = new GLatLng(44.137362, 12.241838);
            map.setCenter(point, 23);
        }
    }
    //]]>
</script>

Però manca ancora qualche cosina:

  • visualizzare i controlli per lo zoom e lo spostamento
  • visualizzazione ibrida cioè la mappa sovrapposta alle immagini da satellite
  • zoomare con un doppio click
  • visualizzare una finestra di informazione

Unisco il tutto nella funzione definitiva:

<script type="text/javascript">
    //<![CDATA[
    var WINDOW_HTML = '<div style="width: 210px; padding-right: 10px"><b>Io sono qui!<br/>Tu dove sei?</div>';
    function load() {
        if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            //definisco la mia posizione
            point = new GLatLng(44.137362, 12.241838);
            //definisco un marcatore
            marker = new GMarker(point);
            //Aggiungo i controlli zoom e pan
            map.addControl(new GSmallMapControl());
            //Aggiungo la selezione del tipo di mappa
            map.addControl(new GMapTypeControl());
            //Imposto il centro della mappa
            map.setCenter(point, 18);         
            //Abilito lo zoom con doppioclick
            map.enableDoubleClickZoom();
            //Mostro il marcatore
            map.addOverlay(marker);
            //Definisco il tipo di mappa (Ibrido)
            map.setMapType(G_HYBRID_MAP);

            //Mostro la finestra di informazioni
            marker.openInfoWindowHtml(WINDOW_HTML);
        }
    }

    //]]>
</script>

Tutto qua, e questo e' il risultato: Esempio google map

La documentazione è piuttosto chiara e si possono esplorare diverse funzionalità .

Può capitare che il cliente abbia due o piu' domini che puntano allo stesso sito, mentre la google map key è relativa ad un singolo dominio.

il trucco è semplice e ringrazio Laura che pur non conoscendo nulla di Javascript ha avuto l'illuminazione mentre io seguivo strade buie ;-)

if (location.hostname == "www.tuosito.com") {
    location.hostname = "www.tuosito.it"
}

Semplice e funzionale, brava Laura! :-)

Altri articoli di interesse:

  1. Attenti a Google map Credo conosciate già la vista stradale delle maps di google....
  2. Come utilizzare google da delphi Come primo passo è necessario ottenere una google api key...
  3. Questo sito potrebbe arrecare danni al tuo computer Giornataccia a Mountain View. Secondo l'illustre parere di Google, oggi,...

Tags: , ,

  1. neocarpe’s avatar

    neocarpe on 12 giugno 2011 at 09:34

    Ciao ho provato il tuo script, l unico problema è che quando carica la pagina non visualizza il Window_Html ho provato in tutti i modi ma non apre nè all'apertura della pagina nè con un click. Sapresti aiutarmi?

  2. Massimiliano’s avatar

    Massimiliano on 13 giugno 2011 at 09:09

    Ciao,
    per chiarezza lo script non prevede l'apertura dell'infowindow in onclick.
    Il mio esempio ti apre la infowindow durante il load della mappa?
    http://www.sinkro.net/wp-content/uploads/2006/07/gmap.html

    Ad ogni modo questo articolo e' un po' vecchiotto... Ti consiglio di usare le nuove API.
    Un esempio di come aprire la infowindow in onclick lo trovi qua:
    http://code.google.com/intl/it-IT/apis/maps/documentation/javascript/examples/infowindow-simple.html

    Ciao