Ti posto il mio esempio multi-infoWindow basato sull'esempio base delle API v3.
<!--<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">-->
<html>
<head>
<!--dall'esempio...-->
<meta name="viewport" content="initial-scale=5.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--jQuery (non posso più farne a meno...)-->
<script type="text/javascript" src="JS/jquery.js"></script>
<!--<script type="text/javascript" src="JS/jquery.vsdoc.js"></script>--> <!-- comodo se usi Visual Studio, remove in release-->
<!--si comincia...-->
<script type="text/javascript">
//i miei dati:
var mapLatitude = 43.3429;
var mapLongitude = 12.8992;
var mapZoom = 10;
// usiamo JSON che è figo (e comodo)
var cityPoints =
[ // le parentesi quadre definiscono un array
{ "lat": 42.745334, "lng":12.738430, text: "aaa" }, // le parentesi graffe definiscono un oggetto
{ lat: 41.745335, lng:"12.585651", text: "mi sono perso"}, // nomi delle proprietà e degli oggetti possono essere racchiusi tra apici (singoli o doppi) oppure no
{ lat: '45.745334', lng: '7.745334', text: "Prova di testo molto lungo. Ancora del testo. aaaaaaaaaaa bbbbbbbbb cccccccc. Fine." },
{ 'lat': 42.745334, lng:12.738430, text: "Spoleto" }, // virgola finale che "aiuta" ad aggiungere record
];
function initialize() {
var latlng = new google.maps.LatLng(cityPoints[0].lat, cityPoints[0].lng );
var myOptions = {
zoom: mapZoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP // or ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//... adesso metto i miei tooltip
$(cityPoints).each(function() { addToMap(map, this); });
return;
// in dettaglio
$(cityPoints) // istanzio un oggeto jQuery da un ogegtto del DOM
.each( // questa funzione itera su tutti gli elementi e prende come parametro una funzione da applicare ad ognuno di essi
function() { addToMap( map, this); } // la funzione applicata contiene la chiamata alla funzione "addToMap".
// da notare che "this" è (in questo contesto) l'oggetto "frutto" dell'iterazione,
// per avere un oggetto jQuery si deve usare $(this) (info utile per altre situazioni)
);
}
function addToMap(map, point) {
var html = "<div style=\"color:blue\"> \
+ point.text + \
</div>";
//alert("point: " + html); solo per test
// from http://code.google.com/intl/it/apis/maps/documentation/v3/overlays.html#Markers
// create the marker
var marker = new google.maps.Marker( {
position: new google.maps.LatLng(point.lat, point.lng),
map: map,
title: point.text
} );
return;
addInfo(map, marker, point);
}
// stesso link del marker ma un pò più sotto
function addInfo(map, marker, point) {
var contentString = '<div id="content">' +
'<div>' +
'</div>' +
'<h1 class="firstHeading">Info</h1>' +
'<div id="bodyContent">' + /* '<div class="cityTitle">' + point.title + "</div>" + */ // aggiungere questa proprietà
'<div class="cityText">' + point.text + '</div>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
ma se qualcosa non è chiaro chiedi pure.
Messaggi recenti
