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....

Code:
<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')" /> &nbsp;&nbsp;
      two: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" /> &nbsp;&nbsp;
      three: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br />

    </form> 
  
</body> 


</html>