Google Maps load multiple sidebars by marker category?

I’ve got a google map that creates and loads different categories of markers from an xml file when the corresponding checkbox is clicked and then updates the list on a sidebar. I’d like to load each category into its own separate sidebar so I can split them up or stack them side-by-side, etc. I’ve got to the point where I can load one of the categories into its sidebar but not the second. I’m not even sure if the code I used to do that is technically correct. Thanks in advance for any help.



          var gmarkers = [];
          var gicons = [];
          var map = null;
    	

    var infowindow = new google.maps.InfoWindow(
      {
        size: new google.maps.Size(100,150)
      });


    gicons["ltblue"] = new google.maps.MarkerImage("images/marker2_ltblue.png");

      var iconImage = new google.maps.MarkerImage('images/marker2_ltblue.png');



    function getMarkerImage(iconColor) {
       if ((typeof(iconColor)=="undefined") || (iconColor==null)) {
          iconColor = "ltblue";
       }
       if (!gicons[iconColor]) {
          gicons[iconColor] = new google.maps.MarkerImage("images/marker2_"+ iconColor +".png");
       }
       return gicons[iconColor];

    }

    function category2color(category) {
       var color = "ltblue";
       switch(category) {
         case "huts": color = "ltblue";
                    break;
         case "yurts":    color = "orange";
                    break;
    	case "demohuts":    color = "red";
                    break;
         default:   color = "ltblue";
                    break;
       }
       return color;
    }

          gicons["huts"] = getMarkerImage(category2color("huts"));
          gicons["yurts"] = getMarkerImage(category2color("yurts"));
    	  gicons["demohuts"] = getMarkerImage(category2color("demohuts"));


          // A function to create the marker and set up the event window
    function createMarker(latlng,name,html,category) {
        var contentString = html;
        var marker = new google.maps.Marker({
            position: latlng,
            icon: gicons[category],

            map: map,
            title: name,
            zIndex: Math.round(latlng.lat()*-100000)<<5
            });
            // === Store the category and name info as a marker properties ===
            marker.mycategory = category;
            marker.myname = name;
            gmarkers.push(marker);



    	google.maps.event.addListener(marker, 'click', function() {
         var testimonial = document.getElementById('hutMapinfo');
    		testimonial.innerHTML = contentString;
           });
    	
    }


          // == 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);
              }
            }
            // == 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);
              }
            }
            // == clear the checkbox ==
            document.getElementById(category+"box").checked = false;
            // == close the info window, in case its open on a marker that we just hid
            infowindow.close();
          }

          // == 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");
          }	
    	
          // == rebuilds the sidebar to match the markers currently displayed ==
          function makeSidebar() {
            var html = "";
            for (var i=0; i<gmarkers.length; i++) {
              if (gmarkers[i].getVisible()) {
                html += '<a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+ i +'].setAnimation(google.maps.Animation.BOUNCE)" onmouseout="gmarkers['+ i +'].setAnimation(null)">' + gmarkers[i].myname + '<\\/a><br>';
              }
    		  document.getElementById(gmarkers[i].mycategory+"side_bar").innerHTML = html;
            }

          }

      function initialize() {
        var myOptions = {
          zoom: 7,
          center: new google.maps.LatLng(39.192948, -105.089823),
          mapTypeId: google.maps.MapTypeId.TERRAIN
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    	
    	





          // Read the data
          downloadUrl("coloradoYurtsToggleTest.xml", function(doc) {
      var xml = xmlParse(doc);
      var markers = xml.documentElement.getElementsByTagName("marker");

            for (var i = 0; i < markers.length; i++) {
              // obtain the attribues of each marker
              var lat = parseFloat(markers[i].getAttribute("lat"));
              var lng = parseFloat(markers[i].getAttribute("lng"));
              var point = new google.maps.LatLng(lat,lng);
              var name = markers[i].getAttribute("label");
              var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
              var category = markers[i].getAttribute("category");
    		  var season = markers[i].getAttribute("season");
              // create the marker
              var marker = createMarker(point,name,html,category);
            }

            // == show or hide the categories initially ==
            show("huts", "demohuts");
    		
            hide("yurts");

            // == create the initial sidebar ==
            makeSidebar();
          });
        }

HTML


<!DOCTYPE html>
<html>
<head>
	<title>10th Mountain Division Hut Association</title>
	<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <title>Google Maps Javascript API v3 Example: Marker Categories</title>
	<link rel="stylesheet" href="css/foundation.css" />
  <link rel="stylesheet" href="css/10thMtn2.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="GXml.js"></script>
<script type="text/javascript" src="downloadxml.js"></script>
<script type="text/javascript" src="xmlToggle.js"></script>
    <title>Google Maps</title>


  </head>
<body onload="initialize()">

<?php include('includes/header3.php'); ?>


<div id="map_canvas" style="width: 100%; height:625px;"></div>
<div id="toggle_box">
<div id="hutYurtsLayers">
<form action="#">
      <img src="images/marker2_ltblue.png"> Huts: <input type="checkbox" id="hutsbox" onclick="boxclick(this,'huts')" /> &nbsp;&nbsp;
      <img src="images/marker2_orange.png"> Yurts: <input type="checkbox" id="yurtsbox" onclick="boxclick(this,'yurts')" /> &nbsp;&nbsp;
	  <br />
    </form>
	<div id="hutsside_bar"></div>
	<div id="yurtsside_bar"></div>
	
</div>
<div id="routeLayers"></div>
</div>
<div id="hutMapinfo"></div>


<?php include('includes/footer.php'); ?>

    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
      However, it seems JavaScript is either disabled or not supported by your browser.
      To view Google Maps, enable JavaScript by changing your browser options, and then
      try again.
    </noscript>

  </body>

</html>