title: Toggle hide/show Google map markers
body: <p>I have a custom Google map with markers of artist locations. I want to make 8 different categories of markers. I read about having to make arrays of markers and assigning a category, but I honestly don't know where to start..</p>
  
  <p>I think this question comes close to what I want:
  <a href="https://stackoverflow.com/questions/5827964/toggle-on-off-google-map-markers-by-category">Toggle on/off Google map markers by category</a>.
  Tried to get that working, but to no avail, I just have too little knowledge.</p>
  
  <p>Here's my HTML. I have a map and a few checkboxes ready, the checkboxes aren't used yet.</p>
  
  <pre><code>&lt;body onload="initialize()"&gt;
  
  &lt;div id="map_container"&gt;
      &lt;div id="map_canvas" style="width:700px; height:350px"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="map_filter"&gt;
      &lt;form action="#"&gt;
        &lt;input type="checkbox" id="beeldend" onclick="displayMarkers(1)" /&gt;&lt;label&gt;Beeldende kunst&lt;/label&gt;&lt;br /&gt;
        &lt;input type="checkbox" id="film" onclick="displayMarkers(2)" /&gt;&lt;label&gt;Film/fotografie&lt;/label&gt;&lt;br /&gt;
        &lt;input type="checkbox" id="dans" onclick="displayMarkers(3)" /&gt;&lt;label&gt;Dans&lt;/label&gt;
      &lt;/form&gt; 
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>And here's my JS. I have a cat1 shadow and cat1 icon, that should be 8 different kinds, but this maybe isn't the way to do it so I kept it at just one cat for readability.
  Then I have one marker (art1) that has it's own pos, shadow etc.</p>
  
  <pre><code>function initialize() {
  var latlng = new google.maps.LatLng(52.0840356, 5.1546501);
  var settings = {
      zoom: 13,
      center: latlng,
      mapTypeControl: true,
      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
      navigationControl: true,
      navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
  
  var contentString = '&lt;div id="content"&gt;'+
      '&lt;div id="siteNotice"&gt;'+
      '&lt;/div&gt;'+
      '&lt;h1 id="firstHeading" class="firstHeading"&gt;Høgenhaug&lt;/h1&gt;'+
      '&lt;div id="bodyContent"&gt;'+
      '&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;'+
      '&lt;/div&gt;'+
      '&lt;/div&gt;';
  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });
  
  var cat1Shadow = new google.maps.MarkerImage('images/shadow.png',
      new google.maps.Size(130,50),
      new google.maps.Point(0,0),
      new google.maps.Point(65, 50)
  );
  
  var cat1Icon = new google.maps.MarkerImage('images/beeldend.png',
      new google.maps.Size(100,50),
      new google.maps.Point(0,0),
      new google.maps.Point(50,50)
  );
  
  var art1Pos = new google.maps.LatLng(52.0840356, 5.1546501);
  var art1Marker = new google.maps.Marker({
      position: art1Pos,
      map: map,
      icon: cat1Icon,
      shadow: cat1Shadow,
      title:"Beeldende kunst",
      zIndex: 4
  });
  
  google.maps.event.addListener(art1Marker, 'click', function() {
    infowindow.open(map,art1Marker);
  });
  
  }
  </code></pre>
  
  <p>So.. What's the best way to create different arrays of markers and toggle their visibility with check boxes? </p>
  
  <p>Also, I'd like to be able to assign addresses to markers in stead of looking up the coordinates.</p>
  
  <p>Thank you</p>