How to hide and show MarkerClusterer in google maps

Question

i'm trying to hide/show markerClusterer when user clicks some buttons:

Here is what i'm trying to do:

    map = new google.maps.Map(document.getElementById("mappa"),mapOptions);
    var marker_tmp = [];
    var markers_tmp = [];
    $.each(json,function(index,value){
        var latLng = new google.maps.LatLng(value.lat,value.lng);
        var marker = new google.maps.Marker({'position': latLng});
        if((value.candidato in markers_tmp)==false){
            markers_tmp[value.name]=[];
        }
        markers_tmp[value.name].push(marker);
    });
    for(var name in markers_tmp){
        markers[name]= new MarkerClusterer(map,markers_tmp[name]);
    }

I create multiple markerClusterer each one is associated to a particular name.

So i have some buttons associated to these particular name and i need to hide/show the marker clusterer associated with that button.

/*This is the function associated to a button when it is clicked*/
function hide_show_cluster(name,visible){
    var tmp_cluster = markers[name];
    //call a function of markerClusterer (tmp_cluster) to hide/show it
}

I've done lots of tests but no one satisfy my request. Can someone help me? Thanks!

Answer 1

I've been struggling the whole morning with this but fortunately I got to a solution.

First of all, make sure you have the latest MarkerClustererPlus version https://github.com/googlemaps/js-marker-clusterer

then it is very easy,

When creating the markers make sure you

set its visible flag to false.

And when creating the marker clusterer do it this way:

new MarkerClusterer(map, markers, { ignoreHidden: true });

if you want to show the clusterer just do this:

for (var it in markers) {
    markers[it].setVisible(true);
}

markerCluster.repaint();

to hide the cluster:

for (var it in markers) {
    markers[it].setVisible(false);
}

markerCluster.repaint();

Hope it helps, regards

Answer 2

You can, for example:

1. Define the click handlers for the buttons;
2. Using the function getMarkers() to get all the markers and save the results to a variable (var allMarkers = getMarkers());
3. Create another variable to add/remove markers (var currentMarkers = allMarkers);
4. When you click in each button you can loop the currentMarkers variable and use the functions removeMarker(MARKER_TO_REMOVE) or addMarker(MARKER_TO_ADD, true) (the true is to redraw the map);
5. When you are looping the markers you can access their information (do a console.log(marker) to see what I'm talking about);

For more information you could see the documentation here: https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

Answer 3

I have the same case and this is how I do it... hope it helps

cluster instanciate

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

to hide the clusters:

function hideMarkers() {
    for (let i in markers) {
        markers[i].setMap(null);
    }
    markerCluster.clearMarkers();
}

to show the clusters:

function showMarkers() {
    for (let i in markers) {
        markers[i].setMap(map);
    }
    markerCluster.addMarkers(markers);
}

here is a jsfiddle link to test http://jsfiddle.net/3s6qfzcy/