Show/Hide markers with category. Not working with MarkerCluster

Question

I'm trying to make a select to show and hide markers with category. Its working fine, but not working if there is a markercluster on map. Eg. when i choose category bar markers on map with category restaurant disapear, but markercluster is still on map. Here is my 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 this depending on the name of your PHP file
downloadUrl("db/parse_xml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName(
        "marker");
    markerArray = [];
    for (var i = 0; i < 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(' +
            i + ')"  >' + name + '</a></li>';
        // markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markerArray);
});}

and my filter function:

filterMarkers = function (category) {
for (i = 0; i < markers.length; i++) {
    marker = markers[i];
    // If is same category or category not picked
    if (marker.category == category || category.length === 0) {
        marker.setVisible(true);
    }
    // Categories don't match 
    else {
        marker.setVisible(false);
    }
}}

Answer 1

I'm assuming you're not wanting to completely remove the marker clusters, just change those where you're hiding the markers. As you're looping over the markers, remove those you're hiding from the cluster, like so:

        // Categories don't match 
        else {
            marker.setVisible(false);
            markerCluster.removeMarker(marker);
        }

Similarly if you show the marker, you probably need to add it back into the cluster, using addMarker

        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
            markerCluster.addMarker(marker);
        }

Then you probably need to call the redraw function on the MarkerClusterer.

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

redraw() Redraws the clusters.

You'll need to amend your code to make the MarkerClusterer a global variable first. e.g.

var markerCluster;

function initialize() {
    ...
    markerCluster = new MarkerClusterer(map, markerArray);
}

filterMarkers = function (category) {
    for (i = 0; i < markers.length; i++) {
        marker = markers[i];
        // If is 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();
};