title: toggle google maps markers by category
body: <p>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 <a href="http://gmaps-samples.googlecode.com/svn/trunk/markerhider/markerhider.htm" rel="nofollow">http://gmaps-samples.googlecode.com/svn/trunk/markerhider/markerhider.htm</a></p>
  
  <p>I cannot seem to get it to work.... Thank you for any and all help! </p>
  
  <p>variable</p>
  
  <pre><code>    var markerGroups = { "parking": [], "trail": [], "shelter": []};
  </code></pre>
  
  <p>load variable</p>
  
  <pre><code>          markerGroups[type].push(marker);
  </code></pre>
  
  <p>function to show hide</p>
  
  <pre><code>    function toggleGroup(type) {
    for (var i = 0; i &lt; markerGroups[type].length; i++) {
    alert(markerGroups[type][i]);
      var marker = markerGroups[type][i];
      if (marker.isHidden()) {
        marker.show();
      } else {
        marker.hide();
      }
    } 
  }
  </code></pre>
  
  <p>Here is the whole of my code. Site link is <a href="http://backpackingconnecticut.com/Map.php" rel="nofollow">http://backpackingconnecticut.com/Map.php</a></p>
  
  <pre><code>&lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
  &lt;title&gt;Backpacking Connecticut Trails&lt;/title&gt;
  &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  //&lt;![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 &lt; 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 = "&lt;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt;" + 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 &lt; markerGroups[type].length; i++) {
      var marker = markerGroups[type][i];
      if (marker.isHidden()) {
        marker.show();
      } else {
        marker.hide();
      }
    } 
  }
  //]]&gt;
  &lt;/script&gt;
  &lt;/script&gt;
    &lt;/head&gt;
   &lt;body onload="load()"&gt;
  &lt;input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('parking')" CHECKED /&gt;  
     parking
     &lt;br/&gt;
     &lt;input type="checkbox" id="barCheckbox" onclick="toggleGroup('shelter')" CHECKED/&gt;  
     shelter
  &lt;/div&gt;&lt;div id="map" style="width: 750px; height: 550px"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Some XML as requested backpackingconnecticut.com/phpsqlajax_genxml.php</p>
  
  <pre><code>&lt;markers&gt;
  &lt;marker name="Mattatuck Trail Parking 1" address="" lat="41.784969" lng="-73.319489" type="parking"/&gt;
  &lt;marker name="Mattatuck Trail Parking 2" address="" lat="41.821751" lng="-73.296867" type="parking"/&gt;
  &lt;marker name="Mattatuck Trail Parking 3" address="" lat="41.784969" lng="-73.319489" type="parking"/&gt;
  &lt;marker name="Mohawk Trail Parking 1" address="" lat="41.818535" lng="-73.368477" type="parking"/&gt;
  &lt;marker name="Mohawk Trail Parking 2" address="" lat="41.784969" lng="-73.319489" type="parking"/&gt;
  &lt;marker name="Appalacian Trail Parking 1" address="" lat="41.731030" lng="-73.490692" type="parking"/&gt;
  &lt;marker name="Appalacian Trail Parking 2" address="" lat="41.807705" lng="-73.391785" type="parking"/&gt;
  &lt;marker name="Appalacian Trail PArking 3" address="" lat="41.731030" lng="-73.490692" type="parking"/&gt;
  &lt;marker name="Dawley Pond Shelter" address="" lat="41.621277" lng="-71.815392" type="shelter"/&gt;
  &lt;marker name="Pachaug Dry Resevoir Shelter" address="" lat="41.590752" lng="-71.881386" type="shelter"/&gt;
  &lt;/markers&gt; 
  </code></pre>