Come aggiungere google maps in una pagina web

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.

[js]

[/js]

Ora definiamo la funzione che caricherà la mappa:

[js]

[/js]

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à :

[js]

[/js]

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:

[js]

[/js]

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 😉

[js]
if (location.hostname == “www.tuosito.com”) {
location.hostname = “www.tuosito.it”
}
[/js]

Semplice e funzionale, brava Laura! 🙂

Tags: , ,

  1. neocarpe’s avatar

    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

    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

Reply

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *