Ciao,
ho bisogno di una mano vorrei inserire più di una Tooltips, una su ogni marker. Volevo sapere come potevo riuscire... Sono arrivato a visualizzare solo la prima.
Grazie Mille
Ho scritto questo codice:
-----------------------------------------------------------------------------------
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>pippo</title>
<style type="text/css">
html, body { margin:0; padding:0; width:500px; height:300px; }
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 latlng1 = new google.maps.LatLng(41.745335,12.585651);
var latlng2 = new google.maps.LatLng(45.745334,7.745334);
var latlng3 = new google.maps.LatLng(42.745334,12.738430);
var latlng4 = new google.maps.LatLng(42.745334,12.738430);
var latlng5 = new google.maps.LatLng(42.745334,12.738430);
var latlng6 = new google.maps.LatLng(42.745334,12.738430);
var options = {
zoom: 5,
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: 'logo_piccolo.png',
flat: true
}
);
var marker1 = new google.maps.Marker(
{
position: latlng1,
map: map,
icon: 'logo_piccolo.png',
flat: true
}
);
var marker2 = new google.maps.Marker(
{
position: latlng2,
map: map,
icon: 'logo_piccolo.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 style="margin:0; padding:0;">
<div id="map" style="width:500px; height:300px;">
</div>
</body>
</html>
-------------------------------------------------------------------------------------
ho bisogno di una mano vorrei inserire più di una Tooltips, una su ogni marker. Volevo sapere come potevo riuscire... Sono arrivato a visualizzare solo la prima.
Grazie Mille
Ho scritto questo codice:
-----------------------------------------------------------------------------------
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>pippo</title>
<style type="text/css">
html, body { margin:0; padding:0; width:500px; height:300px; }
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 latlng1 = new google.maps.LatLng(41.745335,12.585651);
var latlng2 = new google.maps.LatLng(45.745334,7.745334);
var latlng3 = new google.maps.LatLng(42.745334,12.738430);
var latlng4 = new google.maps.LatLng(42.745334,12.738430);
var latlng5 = new google.maps.LatLng(42.745334,12.738430);
var latlng6 = new google.maps.LatLng(42.745334,12.738430);
var options = {
zoom: 5,
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: 'logo_piccolo.png',
flat: true
}
);
var marker1 = new google.maps.Marker(
{
position: latlng1,
map: map,
icon: 'logo_piccolo.png',
flat: true
}
);
var marker2 = new google.maps.Marker(
{
position: latlng2,
map: map,
icon: 'logo_piccolo.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 style="margin:0; padding:0;">
<div id="map" style="width:500px; height:300px;">
</div>
</body>
</html>
-------------------------------------------------------------------------------------
