Conflict between filters and marker clusterer

Question

Hi,

I'm making an interactive map on google maps API v3 (using Javascript) with filters and marker clusterer.

• Filters are working

• Marker clusterer is working too

But when I put the marker clusterer and filters together i have some troubles.

Here I put some screens about my problem in order to be more understood : Map without any filters : • http://prnt.sc/dzlzhk After filtering : • http://prnt.sc/dzlzog

Marker Clusterer :

var markerCluster = new MarkerClusterer(map, markers, 
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

Function to load markers on map :

function loadMarkers(personList) {




    var people = ( typeof personList !== 'undefined' ) ? personList : personData;

    var j = 1; 

    for( i=0; i < people.length; i++ ) {
        var person = people[i];


        if( markerList.indexOf(person.id) !== -1 ) continue;

        var lat = person.lat,
            lng = person.lng,
            markerId = person.id;

        var infoWindow = new google.maps.InfoWindow({
            maxWidth: 400
        });

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng( lat, lng ),
            title: person.nom,
            markerId: markerId,
            icon: markerLocation,
            map: map
        });

        markers[markerId] = marker;
        markerList.push(person.id);

Function to remove markers from map :

function removePersonMarker(id) {
    if( markers[id] ) {
        markers[id].setMap(null);
        loc = markerList.indexOf(id);
        if (loc > -1) markerList.splice(loc, 1);
        delete markers[id];
    }
}

Function to filter markers :

function filterByString( dataProperty, value ) {
    var people = [];

    for( var i=0; i < personData.length; i++ ) {
        var person = personData[i];
        if( person[dataProperty] == value ) {
            people.push( person );
        } else {
            removePersonMarker( person.id );    
        }
    }
    return people;
}

Marker clusterer is not updated when I use a filter and markers are displayed on the map without being clustered.

I tried all the solutions on Stack Overflow but none of them worked.

Any help is appreciate. If it could help I can post parts of the source code. Thanks.

Answer 1

MarkerClusterer provides removeMarker(s) and addMarker(s) methods. Once you initialized the markerClusterer with the array you could also use this methods (instead of adding and removing them just in the list of markers) depending on the rest of the application.

The much more performant way, especially if you filter a lot of markers, is clearing the markers and add the filtered array to the markerClusterer again:

markerClusterer.clearMarkers();
markerClusterer.addMarkers(markers);

Moreover you can have a look at the markerCluster.repaint() method. Probably your bug is caused by this.