Web Design - scritto da Daniele Gallo | Martedì, 18 Novembre, 2008 19:15 - 0 Commenti

inserire google maps nel proprio sito web!

Tags: , , , , , , ,

googlemap.gif
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>



Leave a Reply

Comment


artwork realizzazione siti web milano

Archivi

Fun, IPhone & IPod - Set 8, 2008 11:02 - 0 Comments

iPhone: catturare lo schermo con il firmware 2.0

More In Fun


Apple Fun

Apple - Apr 4, 2010 16:37 - 0 Comments

Bootcamp 3.0

More In Apple


Apple

Flash Design - Set 8, 2008 10:28 - 0 Comments

Utilizzare flash per il proprio sito e ottimizzarlo per google

More In Web Design


Web Design