(un)check Button And Show/hide Markers Google Maps

I tried almost the same thing as in this question Check/uncheck all button to show/hide all markers Google maps api But i'm not getting it to work... I used the same check/uncheck

Solution 1:

The problem with your code is that the change callback that should trigger the show/hide functions is not being called. I added a class markerTypeSwitch to all inputs of type checkbox

<div class="checkbuttons">
  <input type="button" value="Check All" class="button" onclick="check();">
  <input type="button" value="Uncheck All" class="button" onclick="uncheck();"></div>
  <form action="#">
    <div class="map-check"><img src="eat.png" title="Eat" /><div><input class="markerTypeSwitch" type="checkbox" id="eatbox" value="eat" onclick="" checked/> Places to Eat</div></div>
    <div class="map-check"><img src="stay.png" title="Stay" /><div><input class="markerTypeSwitch" type="checkbox" id="staybox" value="stay" onclick="" checked/> Places to Stay</div></div>
    <div class="map-check"><img src="shop.png" title="Shop" /><div><input class="markerTypeSwitch" type="checkbox" id="shopbox" onclick="" value="shop" checked/>Places to Shop</div></div>
    <div class="map-check"><img src="play.png" title="Play" /><div><input class="markerTypeSwitch" type="checkbox" id="playbox" value="play" onclick="" checked/>Places to Play</div></div>
    <div class="map-check"><img src="community.png" title="Community" /><div><input  class="markerTypeSwitch" type="checkbox" value="community" id="communitybox" onclick="" checked/>Community Resources</div></div>
  </div>
</div> 

And change the change event attachment into $(document).ready(function() {}):

$(document).ready(function() {
    // == a checkbox has been changed ==
   $(".markerTypeSwitch").change(function() {
      var cat = $(this).attr("value");
      // If checked
      if ($(this).is(":checked")) {
        show(cat);
      } else {
        hide(cat);
      }
    });
});

Check the result in codepen