Per inserire un marker(segnaposto) in una Google Map,
bisogna personalizzare lo script di inserimento della mappa in modo opportuno:
all’interno dello script che creerà la nostra mappa aggiungiamo
var x = new google.maps.LatLng(45.44182,9.17500);
var marker = new google.maps.Marker({position: x,title:”web developer”});
marker.setMap(map);
x rappresenta le coordinate del punto in cui vogliamo piazzare il marker, mentre title sarà il testo in sovraimpressione.
Come inserire una Google Maps nel proprio sito web?
Innanzitutto partiamo dalle versioni a nostra disposizione, attualmente lavoriamo con la versione 3, la documentazione e alcuni tutorial sono disponibili a questo indirizzo:
http://code.google.com/intl/it-IT/apis/maps/documentation/javascript/
Una novità di questa versione è che non è più necessario registrarsi e acquisire una chiave per usare le Google Maps.
La prima operazione è inserire nell’intestazione della pagina il collegamento alla libreria javascript: <script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script>. Il parametro sensor può avere valore true o false, si metterà il parametro a true se si vuole avere la possibilità di usare la localizzazione gps.
Il secondo passaggio sarà quello di inserire nella propria pagina il box che conterrà la Google Maps:
<div id=”miamappa”></div>
e formattarlo opportunamente con un css, almeno per assegnare le dimensioni. (es. css inline style=”width:400px; height:300px;”).
Per il terzo passaggio torniamo nell’intestazione e inseriamo lo script necessario per la visualizzazione della mappa e la sua centratura:
<script type=”text/javascript”>
var map;
function inizializza() {
var milano = new google.maps.LatLng(45.463681, 9.188171);
var mapOptions = {
zoom: 12,
center: milano,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById(“miamappa”), mapOptions);
}
</script>
La prima riga della funzione inizializza stabilisce le coordinate del punto al centro della mappa. che verrà usata nella variabile mapOptions. Per quanto riguarda gli altri due parametri zoom stabilisce il livello di detaglio della mappa e mapTypeId la tipologia della stessa.
Infine lanciamo la funzione inizializza al caricamento della pagina: <body onload=inizializza();>
Vedi l’esempio completo (visualizza codice sorgente per copiare)