Marker clusterer doesn't refresh after submit button

Question

I'm developing a page in which there are two sections: the right section there is a map and in the left section there a form from which, when a submit button is pressed, draw several markers into the map (the coordinates are taken from a database). Whenever I press the submit button all the markers are deleted and then they are redrawn depending on the data gathered. In this page I'm also using the MarkerClusterer. The problem I'm experiencing is that the markers are deleted correctly but the MarkerClusterer remains in the map, overlapping.

Here is the function I've written which delete the markers:

function removeAllMarkers(){
      for(i = 0; i < markers.length; i++){
          markers[i].setMap(null);
      }

      markers.length = 0;
}

Here is the function that update the markers when the submit button is pressed:

function updateMarkers(dataMarkers){
                removeAllMarkers();

                for (i = 0; i < dataMarkers.length; i++) {
                    bounds.extend(new google.maps.LatLng(dataMarkers[i].latitude, dataMarkers[i].longitude));

                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(dataMarkers[i].latitude, dataMarkers[i].longitude),
                        map: map,
                        animation: google.maps.Animation.DROP,
                        //icon: new google.maps.MarkerImage(icon)
                    });

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent("<b>" + dataMarkers[i].name + "</b>" + "<br/> " 
                                                  + dataMarkers[i].street + "<br/> " 
                                                  + dataMarkers[i].code + " " + "<br/> "
                                                  + dataMarkers[i].city + " " + "<br/> "  
                                                  + dataMarkers[i].country);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));


                    markers.push(marker);
                  }
                  // Fit these bounds to the map
                  map.fitBounds(bounds);

                  clusterer = new MarkerClusterer(map, markers);
            }

The MarkerClusterer library is imported like this:

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>

Where am I doing wrong? Thanks!!

Answer 1

Solution could be like:

var clusterer = new MarkerClusterer(map);

function updateMarkers(dataMarkers) {
    removeAllMarkers();

    if (clusterer) {
        clusterer.clearMarkers();
    }

    // for loop to create markers....

    map.fitBounds();

    clusterer.addMarkers(markers);
}

Answer 2

With google.maps V3, you can call this method at idle event of the map.

  refreshMarkerClusterer() {
    if (this.markerClusterer) {
        this.markerClusterer.clearMarkers();
        this.markers.forEach(marker => {
            this.markerClusterer.addMarker(marker);
        });
    }
  },

Note that this.markerClusterer and this.markers are global variables that are already initialized and, I'm using arrow function in foreach to avoid binding this.