sabato, dicembre 29, 2012

Inserire una mappa di google maps nel proprio sito


Script ajax: Inserire una mappa
di google maps nel proprio sito

Vedremo in questo script come inserire nel proprio sito una mappa personalizzata prelevata da Google Maps.

Per prima cosa necessitiamo di una API Key che possiamo prelevare da qui:
http://www.google.com/apis/maps/signup.html
ogni key potrà essere usata per una directory sola del nostro sito.

Una volta ottenuta la api key la inseriremo in un piccolo javascript in testa alla nostra pagina

..........................

Avremo poi nella nostra pagina un div di dimensioni personalizzabili che conterrà la mappa e un funzione load() che verrà chiamata al caricamento dell pagina

..........................
Ora vediamo lo script vero e proprio che si potrà poi personalizzare

..........................

In questo caso la mappa visualizzerà Roma, con uno zoom tale da visualizzare tutta l'Italia.
Le variabili 41.91633 e 12.482185 Sono infatti le coordinate che rappresentano Roma e 5 lo zoom scelto.
Cambiando tali dati ci sposteremo nella posizione e nello zoom. Tali dati li potremmo passare anche alla funzione load().
Con:

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());


In un altro post vedremo come individuare una zona inserendo, non le coordinate, ma l'indirizzo completo di via, città e numero civico attraverso l'uso di Geocoder.

Lo script completo

..........................


 
 

Nessun commento: