Ciao a tutti,
mi sto avvicinando da poco al mondo API, vorrei riportarvi l'esempio qui di seguito, chiedendo un aiuto nel capire dove si trova l'errore (ci sto dietro da giorni ormai).
Realizzata la mappa e i markers, ho bisogno di aggiungere una sidebar con checkbox in modo tale da attivare solo i markers del livello che mi interessa.
Sono riuscita ad attivare tutto, ma proprio non riesco a capire dove sbaglio: selezionando il checkbox, la mappa resta immobile.
File html:
<!DOCTYPE html>
<html lang="it">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
#mappa{
width: 700px;
height: 550px;
}
.map-info{
font-family: Verdana;
font-size: 13px;
width: 300px;
}
</style>
<title>Google Maps</title>
</head>
<body>
<label><input type="checkbox" id="vodafone box" onclick="boxclick(this,'icon','logovodafone')" /> Vodafone </label>
<label><input type="checkbox" id="telecom box" onclick="boxclick(this,'icon','logotelecom')" /> Vodafone </label>
<p> <div id="mappa"></div></p>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="mappa_prova.js"></script>
</body>
</html>
File js:
var miaPosizione = new google.maps.LatLng(41.225714, 16.295543);
var miaPosizione2 = new google.maps.LatLng(41.228853, 16.296313);
var settings = {
zoom: 15,
center: miaPosizione,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("mappa"), settings);
var logotelecom = new google.maps.MarkerImage( 'icona_blu.png',
new google.maps.Size(60,120),
new google.maps.Point(0,0)
);
var logovodafone = new google.maps.MarkerImage( 'maurizio.png',
new google.maps.Size(60,120),
new google.maps.Point(0,0)
);
var impianto1 = new google.maps.Marker({
position: miaPosizione,
map: map,
icon: logotelecom,
});
var box_impianto1 = '<div class="map-info">Lorem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>';
var infobox = new google.maps.InfoWindow({
content: box_impianto1
});
google.maps.event.addListener(impianto1, 'click', function() {
infobox.open(map,impianto1);
});
var impianto2 = new google.maps.Marker({
position: miaPosizione2,
map: map,
icon: logovodafone,
});
var box_impianto2 = '<div class="map-info">Lorem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>';
var infobox = new google.maps.InfoWindow({
content: box_impianto2
});
google.maps.event.addListener(impianto2, 'click', function() {
infobox.open(map,impianto2);
});
function boxclick(vodafone,icon,logovodafone) {
if (box.checked) {
show(icon,logovodafone);
} else {
hide(icon,logovodafone);
}
}
function show(icon,logovodafone) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i][icon].toUpperCase().indexOf(logovodafone.toUpperCase()) !== -1) {
gmarkers[i].setVisible(true);
}
}
document.getElementById(logovodafone+"vodafone").c hecked = true;
}
Vi sarei molto grata se riusciste a farmi comprendere l'errore.
Grazie mille.
Rispondi quotando
Originariamente inviata da cavicchiandrea
