Search code examples
javascriptjquerygoogle-mapsmarkerclusterer

update markercluster after removing markers from array


I am currently using markercluster plugin with jquery ui maps.

I have two arrays one of all markers (called markers) and one of markers that match search criteria (called current_markers). These are fitered from the first array.

I then draw the current_markers on screen.

I am finding however that the markerclusterer library is not updating based on this change.

So how can I update the markerclusterer?

Is it possible to assign the markerclusterer to a variable and call an update function?


Solution

  • You should store the marker object in a var and then unset the map as following:

    var markerCluster = new MarkerClusterer(map, markers);
    /// ... later on
    markerCluster.setMap(null);
    

    after you've done this, you could init a new MarkerClusterer with new markers

    Update

    since you are using google maps ui plugin here's some additional code. I've added a click even on a button with class reset_markercluster ofcourse this is just to show how to use it to call the map

    var _map, _markerCluster;
    
    $(function() {
      $('#map_canvas').gmap().bind('init', function(event, map) { 
        _map = map; // at this point you can call _map whenever you need to call the map
    
        // build up your markers here ...
    
        _markerCluster = new MarkerClusterer(_map, markers);  // you could also use map instead of _map here cause it's still present in this function
      });
    
      $("button.reset_markercluster").click(function(e) {
        e.preventDefault();
        _markerCluster.setMap(null);  // remove's the previous added markerCluster
    
        // rebuild you markers here ...
    
        _markerCluster = new MarkerClusterer(_map, newMarkers);
    
      });
    });