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

Infowindow: i "fumetti" con le informazioni

L'oggetto InfoWindow apre una tooltip da qualche parte su una mappa, normalmente in corrispondenza di un marker, permettendo di visualizzare informazioni personalizzate. Dal momento che è possibile inserire testo in formato HTML, questa funzionalità può essere utilizzata in modi molto interessanti.

Il namespace di questo oggetto è google.map.InfoWindow che accetta un argomento opzionale (options) in cui è possibile definire alcuni valori tra cui anche il contenuto (content).

Per aprire la InfoWindow è necessario utilizzare il metodo open(), che dispone di due argomenti: l'identificativo dell'istanza della mappa e, opzionalmente, un ancoraggio a cui puntare (deve essere un oggetto della mappa che disponga della proprietà positions).

È consuetudine associare l'apertura della infoWindow in seguito a un evento (click del mouse, tastiera) dell'utente su un oggetto della mappa, e le API V.3 forniscono per questo impiego uno specifico namespace, google.maps.event che tramite il metodo addListener() permette di registrare l'evento, e al suo verificarsi, di effettuare varie operazioni come ad esempio richiamare una funzione personalizzata.

Ecco l'esempio in opera e il codice aggiornato:

<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: InfoWindow</title>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; }
body { background:#FFFFFF; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:150%; text-align:center;}
#map { width:100%; height:100%; }
#tooltip { padding:10px; text-align:left; }
#tooltip p,  #tooltip img { float:left; display:inline; padding:0; margin:0 10px 0 0; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var initialize = function() {
	var latlng = new google.maps.LatLng(42.745334,12.738430);
	var options = {
		zoom: 12,
  		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
  	}; 
	var map = new google.maps.Map(document.getElementById('map'), options);   
  	var marker = new google.maps.Marker(
  		{
			position: latlng,
  			map: map,
  			icon: 'http://google-maps-icons.googlecode.com/files/country.png',
  			flat: true
  		}
  	);
  	var tooltip = '<div id="tooltip">'+
		'<img src="spoleto.jpg" alt="Spoleto">'+
  		'<p><strong>Comune di Spoleto</strong><br>'+
  		'cap: 06049<br>'+
  		'provincia: Perugia<br>'+
  		'nazione. Italia</p>'+
  		'</div>';
	var infowindow = new google.maps.InfoWindow({
  		content: tooltip
  	});
  	google.maps.event.addListener(marker, 'click', function() {
  		infowindow.open(map,marker);
  	});
}
window.onload = initialize;
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

Termina qui la prima parte. Nella seconda, online tra una settimana, affronteremo gli ultimi due argomenti: la ricerca degli indirizzi e il calcolo del percorso tra due località.

Pagina successiva

Pagine: