ATTENZIONE, QUESTO POST E' OBSOLETO. A BREVE NUOVE INDICAZIONI. (07/11/2010)Qualche giorno fa vi ho parlato di dove è possibile reperire le coordinate esatte per inserire una mappa di Google nel vostro sito.
Oggi invece vi voglio spiegare come inserire una mappa partendo da zero.
PRIMO STEP - REGISTRATI PER AVERE LA KEY
Per prima cosa è necessario avere una key collegata al proprio sito. Per farlo è sufficiente andare qui:
http://code.google.com/apis/maps/signup.html , inserire il proprio dominio, e avremo subito sia la chiave sia un esempio di come inserire la mappa nel nostro sito.
SECONDO STEP - INSERIAMO IL CODICE NELL'HEAD DELLA NOSTRA PAGINA
Apriamo la nostra pagina web, e nel tag HEAD inseriamo il seguente codice:
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxxx" type="text/javascript"></script>
Dove "xxxxx" sarà la chiave che ci ha appena dato Google.
Subito sotto inseriamo il codice:
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
Dove i "numeri" all'interno delle parentesi saranno le coordinate del nostro indirizzo, che abbiamo calcolato grazie a www.addressfix.com, e 13 sarà il livello di zoom (0 è il minimo e 17 è il massimo).
TERZO STEP - INSERIAMO UN MARKER
A questo punto potremmo forse voler inserire un "segnalino" che indichi esattamente il nostro indirizzo sulla mappa.
Per fare ciò, aggiungiamo queste righe subito sotto a
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
prima della chiusura delle parentesi grafe.
Ecco il codice:
// Crea un nuovo marker nel punto specificato con una descrizione HTML associata
function createMarker(point, description) {
var marker = new GMarker(point);
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml(description);
});
return marker;
}
// Aggiungi il marker alla mappa
map.addOverlay(
createMarker(new GLatLng(37.4419, -122.1419), "La mia casa<br />Via Nazionale, 1<br />00000 Roma")
);
Con la prima funzione abbiamo creato la variabile marker, che è una nuova istanza dell'oggetto GMarker. Inoltre le abbiamo associato un evento: al passaggio del mouse si apre una "nuvoletta" con una breve descrizione, che può contenere anche tag HTML.
Con la seconda funzione aggiungiamo il marker creato alla mappa, passandogli anche stavolta le coordinate corrette, e di seguito il messaggio HTML che vogliamo visualizzare nella nuvoletta.
QUARTO STEP - IL BODY
Per finire modifichiamo così il tag BODY della nostra pagina:
<body onload="load()" onunload="GUnload()">
Finito!!!
Semplice vero?
Aggiornamenti dicembre 2008- Attenzione! Ricordate sempre di inserire nella vostra pagina un div con id "map", nel quale verrà visualizzata la mappa di Google.
<div id="map"> </div> (preziosa segnalazione di Paolo)
- LINK IMPORTANTI
- esempi ufficiali
- demo ufficiali
- documentazione ufficiale
- guida ufficiale per gli sviluppatori
- guida completa