Posts Tagged ‘map’
Web Design - Martedì, Novembre 18, 2008 19:15 - 0 Comments
inserire google maps nel proprio sito web!
Una guida semplice semplice per non perdersi questo notevole strumento per il nostro sito/blog.
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 questo sito, 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()”>
ATTENZIONE!
Ricordarsi alla fine della procedura, di inserire nel punto della pagina web dove voler far apparire la google map di inserire il seguente tag: <div id=”map”> </div>
