javascript - (un)check button and show/hide markers google maps

Question

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-buttons but clicking these buttons, doesn't change my markers. Only the checkboxes are being checked/unchecked at once.

I also tried the "initially hidden" part, but still all markers are visible..

Could you help me out? I would appreciate it!

Here is my code:

<script type="text/javascript">
var gmarkers = [];
var map = null;
var ib = new InfoBox();

// Function to check/uncheck and show/hide all checkboxes and accordingly all markers
function check() {
  $('input[type="checkbox"]').prop("checked", true).change();
}

function uncheck() {
  $('input[type="checkbox"]').prop("checked", false).change();
}


// A function to create the marker and set up the event window
function createMarker(latlng,name,html,category) {
  var boxText = document.createElement("div");
  boxText.style.cssText = "margin-top: 10px; background: rgba(255,255,255,0.7); padding: 10px; border-radius: 10px; color: #000";
  boxText.innerHTML = html;

  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-100, 0),
    zIndex: null,
    boxStyle: { 
      background: "url('tip.png') no-repeat",
      width: "250px",
    },
    closeBoxURL: "",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };

  var marker = new google.maps.Marker({
    position: latlng,
    icon: category + ".png",
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat()*-100000)<<5
  });

  // === Store the category and name info as a marker properties ===
  marker.mycategory = category;                                 
  marker.myname = name;
  gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    ib.setOptions(myOptions)
    ib.open(map, this);
  });
} // end createMarker

// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
  for (var i=0; i<gmarkers.length; i++) {
    if (gmarkers[i].mycategory == category) {
      gmarkers[i].setVisible(true);
    }
  }
  // == check the checkbox ==
  document.getElementById(category+"box").checked = true;
}

// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
  for (var i=0; i<gmarkers.length; i++) {
    if (gmarkers[i].mycategory == category) {
      gmarkers[i].setVisible(false);
    }
  }
  // == clear the checkbox ==
  document.getElementById(category+"box").checked = false;
  // == close the info window, in case its open on a marker that we just hid
  ib.close();
}

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



function myclick(i) {
  google.maps.event.trigger(gmarkers[i],"click");
}

function initialize() {
  var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(43.65623,-79.38518),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);

  google.maps.event.addListener(map, 'click', function() {
    ib.close();
  });

  $(document).ready(function(){
    $.getJSON('data.json', function(data) {
      for (var i = 0; i < data.length; i++) {
        // obtain the attribues of each marker
        var item = data[i];
        var point = new google.maps.LatLng(item.ltt, item.lgt);
        var name = item.name;
        var html = "<b>"+item.name+"</b><br />"+item.place+"<br /><a href='"+ item.url +"' title='"+ item.name +"'>View details</a>";
        var category = item.cat;
        // create the marker
        var marker = createMarker(point,name,html,category);
      }



// == show or hide the categories initially ==
markers.forEach((marker) => marker.setVisible(false))

    }); //end JSON
  }); //end jQuery

} //end initialize

</script>
</head>
<body onload="initialize()"> 

<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 type="checkbox" id="eatbox" value="eat" onclick="boxclick(this,'eat')" /> Places to Eat</div></div>
  <div class="map-check"><img src="stay.png" title="Stay" /><div><input type="checkbox" value="stay" id="staybox" onclick="boxclick(this,'stay')" /> Places to Stay</div></div>

    </div>
  </div> 
</div>

<div id="map" style="width: 750px; height: 600px"></div>
</body>

</html>

Answer 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