javascript - Show/Hide markers with category. Not working with MarkerCluster -

i'm trying make select show , hide markers category. working fine, not working if there markercluster on map. eg. when choose category bar markers on map category restaurant disapear, markercluster still on map. here intin function:

function initialize() { directionsdisplay = new google.maps.directionsrenderer(); var chicago = new google.maps.latlng(52.6145, 21.3418); var mapoptions = {     zoom: 6,     center: chicago }; map = new google.maps.map(document.getelementbyid('map-canvas'),     mapoptions); directionsdisplay.setmap(map); // geolocation if (navigator.geolocation) {     navigator.geolocation.getcurrentposition(function(position) {         var pos = new google.maps.latlng(position.coords.latitude,             position.coords.longitude);         document.getelementbyid('field').value = +position.coords             .latitude + "," + position.coords.longitude;         marker = new google.maps.marker({             position: pos,             animation: google.maps.animation.drop,             map: map         });         map.setcenter(pos);     }, function() {         handlenogeolocation(true);     }); } else {     // browser doesn't support geolocation     handlenogeolocation(false); } var infowindow = new google.maps.infowindow; // change depending on name of php file downloadurl("db/parse_xml.php", function(data) {     var xml = data.responsexml;     var markers = xml.documentelement.getelementsbytagname(         "marker");     markerarray = [];     (var = 0; < markers.length; i++) {         var name = markers[i].getattribute("name");         var address = markers[i].getattribute("address");         var type = markers[i].getattribute("type");         var cover = markers[i].getattribute("cover");         var point = new google.maps.latlng(parsefloat(markers[i]             .getattribute("lat")), parsefloat(markers[i]             .getattribute("lng")));         var html = "<div id='infobox'><img src='" + cover +             "'/><b>" + name + "</b><br>" + address +             " <br/><input type='button' id='end' onclick=calcroute() name='" +             name + "," + address +             "' value='wyznacz trasę'></div>";         var icon = customicons[type] || {};         var marker = new google.maps.marker({             map: map,             position: point,             icon: icon.icon,             shadow: icon.shadow,             category: type         });         markerarray.push(marker);         bindinfowindow(marker, map, infowindow, html);         document.getelementbyid('pasekboczny').innerhtml +=             '<li class="list-sidebar" ><a href="javascript:myclick(' +             + ')"  >' + name + '</a></li>';         // markers.push(marker);     }     var markercluster = new markerclusterer(map, markerarray); });} 

and filter function:

filtermarkers = function (category) { (i = 0; < markers.length; i++) {     marker = markers[i];     // if same category or category not picked     if (marker.category == category || category.length === 0) {         marker.setvisible(true);     }     // categories don't match      else {         marker.setvisible(false);     } }} 

i'm assuming you're not wanting remove marker clusters, change you're hiding markers. you're looping on markers, remove you're hiding cluster, so:

        // categories don't match          else {             marker.setvisible(false);             markercluster.removemarker(marker);         } 

similarly if show marker, need add cluster, using addmarker

        // if same category or category not picked         if (marker.category == category || category.length === 0) {             marker.setvisible(true);             markercluster.addmarker(marker);         } 

then need call redraw function on markerclusterer.

see https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

redraw() redraws clusters.

you'll need amend code make markerclusterer global variable first. e.g.

var markercluster;  function initialize() {     ...     markercluster = new markerclusterer(map, markerarray); }  filtermarkers = function (category) {     (i = 0; < markers.length; i++) {         marker = markers[i];         // if same category or category not picked         if (marker.category == category || category.length === 0) {             marker.setvisible(true);             markercluster.addmarker(marker);         }         // categories don't match          else {             marker.setvisible(false);             markercluster.removemarker(marker);         }     }      markercluster.redraw(); };