toggle google maps markers by category

I am trying to get google maps to toggle markers. I am using an array to keep track of the markers and checkboxes to select which to get rid of. Here is some highlights of my code, I will paste the whole thing below. I tried to emulate the code in this link http://gmaps-samples.googlecode.com/svn/trunk/markerhider/markerhider.htm

I cannot seem to get it to work.... Thank you for any and all help!

variable

    var markerGroups = { "parking": [], "trail": [], "shelter": []};

load variable

          markerGroups[type].push(marker);

function to show hide

    function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
  alert(markerGroups[type][i]);
    var marker = markerGroups[type][i];
    if (marker.isHidden()) {
      marker.show();
    } else {
      marker.hide();
    }
  } 
}

Here is the whole of my code. Site link is http://backpackingconnecticut.com/Map.php

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Backpacking Connecticut Trails</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
//<![CDATA[
var markerGroups = { "parking": [], "trail": [], "shelter": []};
var customIcons = {
  shelter: {
    icon: 'http://backpackingconnecticut.com/images/shelter_picnic.png'
  },
  parking: {
    icon: 'http://backpackingconnecticut.com/images/parking.png'
  }
};
function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(41.613889, -72.7725),
    zoom: 9,
    mapTypeId: 'terrain'
  });
  var infoWindow = new google.maps.InfoWindow;
  downloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var type = markers[i].getAttribute("type");
      var html = "<b>" + name + "</b> <br/>" + address;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon
      });
      markerGroups[type].push(marker);
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    var marker = markerGroups[type][i];
    if (marker.isHidden()) {
      marker.show();
    } else {
      marker.hide();
    }
  } 
}
//]]>
</script>
</script>
  </head>
 <body onload="load()">
<input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('parking')" CHECKED />  
   parking
   <br/>
   <input type="checkbox" id="barCheckbox" onclick="toggleGroup('shelter')" CHECKED/>  
   shelter
</div><div id="map" style="width: 750px; height: 550px"></div>
</body>
</html>

Some XML as requested backpackingconnecticut.com/phpsqlajax_genxml.php

<markers>
<marker name="Mattatuck Trail Parking 1" address="" lat="41.784969" lng="-73.319489" type="parking"/>
<marker name="Mattatuck Trail Parking 2" address="" lat="41.821751" lng="-73.296867" type="parking"/>
<marker name="Mattatuck Trail Parking 3" address="" lat="41.784969" lng="-73.319489" type="parking"/>
<marker name="Mohawk Trail Parking 1" address="" lat="41.818535" lng="-73.368477" type="parking"/>
<marker name="Mohawk Trail Parking 2" address="" lat="41.784969" lng="-73.319489" type="parking"/>
<marker name="Appalacian Trail Parking 1" address="" lat="41.731030" lng="-73.490692" type="parking"/>
<marker name="Appalacian Trail Parking 2" address="" lat="41.807705" lng="-73.391785" type="parking"/>
<marker name="Appalacian Trail PArking 3" address="" lat="41.731030" lng="-73.490692" type="parking"/>
<marker name="Dawley Pond Shelter" address="" lat="41.621277" lng="-71.815392" type="shelter"/>
<marker name="Pachaug Dry Resevoir Shelter" address="" lat="41.590752" lng="-71.881386" type="shelter"/>
</markers>

In the Google Maps Javascript API v3 the google.maps.Marker class does not have a .isHidden method (or a .hide() or a .show() method).

The v3 equivalent of those are:

getVisible()    boolean
setVisible(visible:boolean) None

updated toggleGroup function:

function toggleGroup(type) {
    for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (!marker.getVisible()) {
            marker.setVisible(true);
        } else {
            marker.setVisible(false);
        }
    }
}

working fiddle

code snippet:

var markerGroups = {
  "parking": [],
  "trail": [],
  "shelter": []
};
var customIcons = {
  shelter: {
    icon: 'http://backpackingconnecticut.com/images/shelter_picnic.png'
  },
  parking: {
    icon: 'http://backpackingconnecticut.com/images/parking.png'
  }
};
var map;

function load() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(41.613889, -72.7725),
    zoom: 9,
    mapTypeId: 'terrain'
  });
  var infoWindow = new google.maps.InfoWindow();
  // downloadUrl("phpsqlajax_genxml.php", function(data) {
  var xml = parseXml(xmlStr); // data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    bounds.extend(point);
    var type = markers[i].getAttribute("type");
    var html = "<b>" + name + "</b> <br/>" + address;
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon
    });
    markerGroups[type].push(marker);
    bindInfoWindow(marker, map, infoWindow, html);
  }
  // });
  map.fitBounds(bounds);
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    // alert(markerGroups[type][i]);
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
    } else {
      marker.setVisible(false);
    }
  }
}
google.maps.event.addDomListener(window, 'load', load);

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
}

var xmlStr = '<markers><marker name="Mattatuck Trail Parking 1" address="" lat="41.784969" lng="-73.319489" type="parking"/><marker name="Mattatuck Trail Parking 2" address="" lat="41.821751" lng="-73.296867" type="parking"/><marker name="Mattatuck Trail Parking 3" address="" lat="41.784969" lng="-73.319489" type="parking"/><marker name="Mohawk Trail Parking 1" address="" lat="41.818535" lng="-73.368477" type="parking"/><marker name="Mohawk Trail Parking 2" address="" lat="41.784969" lng="-73.319489" type="parking"/><marker name="Appalacian Trail Parking 1" address="" lat="41.731030" lng="-73.490692" type="parking"/><marker name="Appalacian Trail Parking 2" address="" lat="41.807705" lng="-73.391785" type="parking"/><marker name="Appalacian Trail PArking 3" address="" lat="41.731030" lng="-73.490692" type="parking"/><marker name="Dawley Pond Shelter" address="" lat="41.621277" lng="-71.815392" type="shelter"/><marker name="Pachaug Dry Resevoir Shelter" address="" lat="41.590752" lng="-71.881386" type="shelter"/></markers>';

.top {
  margin: 0 auto;
  top: 5px;
  height: 100px;
  width: 949px;
  border: 3px solid #8AC007;
  padding: 10px;
  background-color: FFFFCC;
}
.right {
  margin: 0 auto;
  width: 750px;
  border: 3px solid #8AC007;
  background-color: FFFFCC;
}
.child1 {
  top: 0px;
  height: 15px;
  margin: 10px;
  padding: 10px;
  display: inline-block;
  overflow: hidden
}
body {
  background-color: #669933;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="top">
  <img src="http://backpackingconnecticut.com/images/logo.png" width="100" height="100" alt="Backpacking Connecticut" style="float:left" ;/>

  <h3 style="float:left;"><p style="font-size: 200%;"><FONT COLOR="669933">Backpacking Connecticut</FONT></p></h3>

  <input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('parking')" CHECKED />parking
  <br/>
  <input type="checkbox" id="barCheckbox" onclick="toggleGroup('shelter')" CHECKED/>shelter</form>
</div>
<div class="right"></div>
<div id="map" style="width: 750px; height: 550px"></div>
</div>

my example "categories" map (translated to v3 from Mike Williams' v2 tutorial)