Google Map sul tuo sito web

Oggi, grazie alle API Key di Google è possibile inserire durante la realizzazione di un sito web una mappa interattiva nella pagina dei vostri contattti, come quella di Google Map.

Vediamo insieme quali sono le operazioni necessarie ad impostarne una:

1. Richiedere una API key;
2. Salvare il codice della pagina con la mappa;
3. Impostare le caratteristiche della mappa;

RICHIEDERE UNA API KEY

Si tratta di un codice identificativo che google associa al sito nel quale vuoi inserire la mappa.

1. Vai nella pagina http://www.google.com/apis/maps/signup.html;
2. Accetta le condizioni d’uso del servizio;
3. Inserisci l’indirizzo del tuo sito http://www.tuosito.it
4. Premi il pulsante “Generate Api Key“
5. Usa il tuo nome utente e password Gmail per accedere al pannello;

Una volta eseguito l’accesso, all’interno trovi sia la tua API Key sia una pagina di esempio.

Guarda un esempio

CARATTERISTICHE DEL CODICE

map.addControl(new GSmallMapControl());
inserisce i pulsanti di navigazione sulla sinistra in versione small

map.addControl(new GLargeMapControl());
inserisce i pulsanti di navigazione sulla sinistra in versione large

map.addControl(new GMapTypeControl());
inserisce i pulsanti per cambiare la modalità di visualizazione (mappa, satellite ed ibrida), in alto a destra della mappa.

map.setCenter(new GLatLng(43.7892, 11.2285), 13);
La prima è la latitudine in gradi esadecimali, la seconda è la longitudine sempre in gradi esadecimali.
Il valore 13 è l’ingrandimento della mappa, più il valore basso maggiore è la distanza, uno zoom più elevato rende vicino l’obiettivo.

Importante: Per ogni sito in cui vuoi inserire una mappa devi generare una API Key, invece se nello stesso sito vuoi pubblicare più mappe, l’API key è la stessa.

Per testare le API Key in locale è sufficiente insererire come indirizzo il vostro localhost.
Per trovare le coordinate per la tua Google Map è disponibile un’utilissimo tool per calcolare le coordinate esatte  in LATITUDINE e LONGITUDINE, realizzato dal mio amico Andrea Bersi.

I commenti sono chiusi.