Aggiungere Google Maps ad una pagina web

Come incorporare in una pagina web? Ecco il codice allineato alla seconda versione delle API di GoogleMaps.

PRIMO STEP
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 (http://maps.google.com/apis/maps/signup.html), indicando l'indirizzo per il quale si ha intenzione utilizzare il servizio (per es. danilofolli.it/) 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.

SECONDO STEP
Apriamo la nostra pagina web, e nel tag HEAD inseriamo il seguente codice:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=xxxxx"></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 http://www.addressfix.com/ e 13 sarà il livello di zoom (0 è il minimo e 17 è il massimo).

TERZO STEP
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
Inserire nella vostra pagina un div con id "map", nel quale verrà visualizzata la mappa di Google:

<div id="map" onload="load()" onunload="GUnload()"> </div>


LINK IMPORTANTI
- esempi ufficiali
- demo ufficiali
- documentazione ufficiale
- guida ufficiale per gli sviluppatori
- guida completa