Ciao ragazzi, ho trovato uno script che mi permette di visualizzare la mappaed a destra le categorie (hotel, bar, ristoranti). Grazie a dei ceckbox, c'è la possibilità di visualizzare/non visualizzare la categoria, e fin qui funge tutto...
Io però vorrei che le voci delle diverse categorie abbiano un tipo di marcatore diverso dalle altre categorie (e soprattutto diverso da quello di default). Quindi ristoranti il file risto.jpg, i bar, bar.jpg e così via...
Inoltre, cliccando sui marcatori, vorrei visualizzare il contenuto della variabile name (o comunque del testo html)
Mi potreste aiutare???
Grazie in anticipo a tutti!!!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="gmap3.min.js"></script>
<script type="text/javascript">
var villes = [
{name:"Grand Hotel",dpts:75,region:"Hotel",lat:48.8566667,lng:2 .3509870999999976},
{name:"Al marinaio",dpts:13,region:"Ristorante",lat:43.29761 16,lng:5.381042100000059},
{name:"Bar dello sport",dpts:69,region:"Bar",lat:45.7673095,lng:4.8 34251300000005},
{name:"Hilton",dpts:76,region:"Hotel",lat:49.49259 09,lng:0.10650269999996453},
];
</script>
<style>
body{
text-align:center;
}
#container{
width: 800px;
margin: 20px auto;
}
.gmap3{
border: 1px dashed #C0C0C0;
width: 500px;
height: 500px;
}
#dpts{
float:right;
width: 250px;
height:500px;
text-align:left;
border: 1px solid #999999;
font-family: verdana;
font-size: 11px;
background-color:#99B3CC;
color:#000000;
text-shadow: #ffffff 1px 1px, #ffffff -1px 1px, #ffffff -1px -1px, #ffffff 1px -1px;
line-height:17px;
}
#dpts input[type=checkbox]{
margin-right:10px;
}
</style>
<script type="text/javascript">
$(function(){
var data = [],
tmp = {},
r, k,
regions = [],
$dpts = $("#dpts");
$.each(villes, function(i, ville){
data.push({
lat: ville.lat,
lng: ville.lng,
tag: ville.region,
data: ville
});
tmp[ ville.region ] = true;
});
for(r in tmp){
regions.push(r);
}
regions = regions.sort();
for(k in regions){
$dpts.append('<input id="chk'+k+'" type="checkbox" checked><label for="chk'+k+'">'+regions[k]+'</label>
');
}
$('input', $dpts).change(function(){
var region = $('label[for='+$(this).attr('id')+']', $dpts).html(),
checked = $(this).is(':checked'),
map = $('#test1').gmap3('get'),
markers;
markers = $('#test1').gmap3({
action:'get',
name:'marker',
all: true,
tag:region
});
$.each(markers, function(i, marker){
marker.setMap( checked ? map : null);
});
});
$('#test1').gmap3(
{ action:'init',
options:{
center:[46.578498,2.457275],
zoom: 5
}
},{
action:'addMarkers',
markers: data
});
});
</script>
<body>
<div id="container">
<div id="dpts"></div>
<div id="test1" class="gmap3"></div>
</div>
</body>
</html>
Rispondi quotando