my site is http://wifi-serres.gr but when is load is not work the checkboxes, if you check one time and uncheck after is work. and when i open a marker infowindow and after open another one, the previous infowindow don’t close, please help me. sorry for my English…
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>wifi-serres.gr</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>
<script type="text/javascript" src="js/infowindowcss.js"></script>
<script type="text/javascript">
var mtypes = [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN ];
var side_bar_html = "";
var gmarkers = [];
var infowindow;
var map = null;
var gicons = [];
var infoBubble;
var markerShadow = new google.maps.MarkerImage(
"images/shadow.png",
new google.maps.Size(54,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);
function createMarker(name, latlng, icon, markerShadow, address, html, category, infoBubble) {
var contentString = html;
infoBubble = new InfoBubble({
map : map,
maxWidth : 400,
minWidth : 150,
maxHeight : 300,
minHeight : 50,
shadowStyle : 1,
padding : 10,
backgroundColor : '#eeeeee',
borderRadius : 20,
arrowSize : 15,
borderWidth : 3,
borderColor : '#aaaaaa',
disableAutoPan : false,
hideCloseButton : false,
arrowPosition : 50,
arrowStyle : 0
});
var markerIcon = new google.maps.MarkerImage(
icon,
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon:markerIcon,
shadow:markerShadow,
title:address
});
google.maps.event.addListener(map, 'click', function() {
infoBubble.close(map, marker);
});
infoBubble.addTab('info window', contentString);
google.maps.event.addListener(marker, 'click', function () {
if (!infoBubble.isOpen()) {
infoBubble.open(map, marker);
} else {
infoBubble.close(map, marker);
}
});
marker.mycategory = category;
marker.myname = name;
gmarkers.push(marker);
// add a line to the side_bar html
makeSidebar();
return marker;
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
makeSidebar();
// == check the checkbox ==
document.getElementById(category+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
makeSidebar();
// == clear the checkbox ==
document.getElementById(category+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
infoBubble.close(map, marker);
}
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
// == rebuild the side bar
makeSidebar();
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i], 'click');
map.setCenter(gmarkers[i].position);
}
function makeSidebar() {
var html = "";
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;
}
function initialize() {
var myLatlng = new google.maps.LatLng(41.084316, 23.546791);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions:
{
position: google.maps.ControlPosition.TOP_RIGHT,
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: mtypes
},
zoomControl: true,
zoomControlOptions:
{
position: google.maps.ControlPosition.LEFT_CENTER,
style: google.maps.ZoomControlStyle.DEFAULT
}
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- var markersArray = []; -->
downloadUrl("markers.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var address = markers[i].getAttribute("address");
var name = markers[i].getAttribute("name");
var html = "<b>"+name+"<\\/b><p>"+address;
var category = markers[i].getAttribute("category");
var marker = createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("icon"), markerShadow, markers[i].getAttribute("address"), html, category);
<!-- markersArray.push(marker); -->
}
hide("theatre");
hide("golf");
hide("info");
makeSidebar();
<!-- var markerCluster = new MarkerClusterer(map, markersArray); -->
});
}
</script>
</head>
<body onload="initialize()">
<table border="0" cellspacing="5" cellpadding="0" bordercolor="#000000" bgcolor="#ffffff" height="500">
<tr><td bordercolor="#000000" bgcolor="#EBEBEB" valign="top">
<div id="map_canvas" style="width: 800px; height: 500px"></div>
</td>
<td valign="top" bgcolor="#EBEBEB" style="width:350px; text-decoration: underline; color: #4444ff;">
<div id="side_bar" style="overflow:auto; height:500px;"></div>
</td>
</tr>
</table>
<form action="#">
one: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" />
two: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" />
three: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br />
</form>
</body>
</html>