(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">
  <inputtype="button"value="Check All"class="button"onclick="check();"><inputtype="button"value="Uncheck All"class="button"onclick="uncheck();"></div><formaction="#"><divclass="map-check"><imgsrc="eat.png"title="Eat" /><div><inputclass="markerTypeSwitch"type="checkbox"id="eatbox"value="eat"onclick=""checked/> Places to Eat</div></div><divclass="map-check"><imgsrc="stay.png"title="Stay" /><div><inputclass="markerTypeSwitch"type="checkbox"id="staybox"value="stay"onclick=""checked/> Places to Stay</div></div><divclass="map-check"><imgsrc="shop.png"title="Shop" /><div><inputclass="markerTypeSwitch"type="checkbox"id="shopbox"onclick=""value="shop"checked/>Places to Shop</div></div><divclass="map-check"><imgsrc="play.png"title="Play" /><div><inputclass="markerTypeSwitch"type="checkbox"id="playbox"value="play"onclick=""checked/>Places to Play</div></div><divclass="map-check"><imgsrc="community.png"title="Community" /><div><inputclass="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 checkedif ($(this).is(":checked")) {
        show(cat);
      } else {
        hide(cat);
      }
    });
});

Check the result in codepen