Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS

Google Maps: le API v.3

di: Filippo Buratti 11 Gennaio 2010

Un Esempio di mappa

Dato per assunto di conoscere le coordinate di latitudine e longitudine del centro della mappa, ecco il codice minimale del primo esempio:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Google Maps API v3: esempio base</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
var initialize = function() {

  // fornisce latitudine e longitudine
  var latlng = new google.maps.LatLng(42.745334,12.738430);
  
  // imposta le opzioni di visualizzazione
  var options = { zoom: 12,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                
  // crea l'oggetto mappa
  var map = new google.maps.Map(document.getElementById('map'), options);
}

window.onload = initialize;
</script>

</head>
<body style="margin:0; padding:0;">
<div id="map" style="width:100%; height:100%"></div>
</body>
</html>

Aggiungiamo i marcatori

Attraverso i Marker è possibile evidenziare i punti di interesse su una mappa. L'oggetto marker dispone del namespace google.maps.Marker e accetta un unico argomento, options, un oggetto letterale che può contenere diverse proprietà, di cui due obbligatorie:

Proprietà	Descrizione
map	un riferimento alla mappa in cui si desidera aggiungere il marker
position	indica la posizione del marcatore ed è del tipo `google.maps.LatLng`

Possiamo aggiungere il seguente codice e vedere il nuovo esempio:

var marker = new google.maps.Marker({ position: latlng,
                                      map: map, 
                                      title: 'Questo è un testo di suggerimento' });

Con molta semplicità anche con le API V.3 è possibile cambiare l'icona di default del marker tramite queste altre proprietà:

Proprietà	Descrizione
icon	può contenere l'indirizzo di una icona personalizzata
shadow	imposta l'ombra del marker e può contenere il collegamento a una immagine
flat	booleano, se impostato su true disabilita l'ombra del marcatore