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

   difficoltà:  script script script script script

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>

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=INSERIRE_QUI_LA_API_KEY" type="text/javascript"></script>

</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:
<body onload="load();" onunload="GUnload();">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
Ora vediamo lo script vero e proprio che si potrà poi personalizzare:
<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>
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());
aggiungiamo il controllo dello zoom e la possibilità di scegliere se visualizzare la mappa o la vista da satellite. Sono comunque opzionali.

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&amp;v=2.x&amp;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>


Social:


Donazione:
Se questo script ti è stato utile e ti ho fatto risparmiare tempo e denaro fai una
qualsiasi cifra è ben accetta! 1€, 3€, 5€ ,10€, 50€ ;-) fai te!


Permalink: Tag:
mappa   maps   google   ajax   script  
Script Simili: Permalink: Link utili:
Tools:
Feed RSS     Download  



Commenti


  daniele

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.

  Fabio

12/3/2008 20:23:17

aggiungi:

map.setMapType(G_SATELLITE_MAP);

per settare come default la visualizzazione da satellite

  daniele

13/3/2008 11:24:52

GRAZIE FABIO funzia!

  carmelo

28/3/2011 0:05:01

ho utilizzato il vostro script per inserire una mappa vista dal satellite.
funziona perfettamente
la mia domanda è
come inserire di default la
vista satellite?
grazie



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.