Geek Answers Handbook

How to hide and show MarkerClusterer on google maps

I try to hide / show markerClusterer when the user clicks on some buttons:

Here is what I am 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 several markerClusterer, each of which is associated with a specific name.

So, I have some buttons associated with this particular name, and I need to hide / show the cluster cluster associated with this 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 did a lot of tests, but no one satisfied my request. Can anybody help me? Thanks!

+6
source share
3 answers

I struggled for all this time, but, fortunately, I got to the solution.

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

it’s very easy

When creating markers, make sure that you

set your visible flag to false.

And when creating a cluster token, do it like this:

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

if you want to show that the cluster just does 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 this helps, believes

+16
source

You can, for example:

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

For more information, you can see the documentation here: https://googlemaps.imtqy.com/js-marker-clusterer/docs/reference.html

+1
source

I have the same case, and here's how I do it ... hope this helps

cluster instanciate

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

to hide clusters:

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

to show clusters:

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

here is the jsfiddle link for checking http://jsfiddle.net/3s6qfzcy/

0
source

More articles:


All Articles