Script ajax: Inserire una mappa di google maps nel proprio sito
difficoltà:
Download
Script simili
19/4/2007
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:
<head>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:
<script src="http://maps.google.com/maps?file=api&v=2.x&key=INSERIRE_QUI_LA_API_KEY" type="text/javascript"></script>
</head>
<body onload="load();" onunload="GUnload();">Ora vediamo lo script vero e proprio che si potrà poi personalizzare:
<div id="map" style="width: 500px; height: 300px"></div>
</body>
<script type="text/javascript">In questo caso la mappa visualizzerà Roma, con uno zoom tale da visualizzare tutta l'Italia.
var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(41.91633, 12.482185), 5);
}
}
</script>
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());aggiungiamo il controllo dello zoom e la possibilità di scegliere se visualizzare la mappa o la vista da satellite. Sono comunque opzionali.
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:
<script src="http://maps.google.com/maps?file=api&v=2.x&key=INSERIRE_QUI_LA_API_KEY" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(41.91633, 12.482185), 5);
}
}
</script>
<body onload="load();" onunload="GUnload();">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
Permalink:
Tag:
Script Simili:
Script ajax: Visualizzare sul proprio sito un indirizzo con Google maps
Script ajax: Mappe Google maps sul proprio sito metodo veloce in iframe
Script ajax: Calcolare il percorso con google maps sul sito
Script ajax: Caricare su Google maps coordinate da xml o feed rss con georss
Script ajax: Mappe personalizzate kml su google maps con georss e Mapplets
Script ajax: Mappe Google maps sul proprio sito metodo veloce in iframe
Script ajax: Calcolare il percorso con google maps sul sito
Script ajax: Caricare su Google maps coordinate da xml o feed rss con georss
Script ajax: Mappe personalizzate kml su google maps con georss e Mapplets
Link utili:
Vota:
Commenti
Fabio
12/3/2008 20:23:17
aggiungi:
map.setMapType(G_SATELLITE_MAP);
per settare come default la visualizzazione da satellite
Feed Rss
12/3/2008 18:32:57
grazie per il tuo lavoro.
in alto hai descritto tutto, in particolare le funzioni map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());
ma non come sia possibile settare la funzione "vista satellitare"
mi aiuti ancora? grazie.