Any change in zoom level causes all my markers to re-appear on my Google map

Question

Any change in zoom level causes all markers to appear on the map that have been on the map at any time since the last page load. This is true whether the zoom level change is due to a setZoom() call in my code or because I operate the zoom slider.

I have a map control widget with buttons to add markers that correspond to different categories. So you click the button for Groups and the map populates with markers that represent Groups. Then you click on the Individuals button and the Groups markers are cleared and deleted and the Individual markers appear on the map. And so on with other categories. But any change in zoom level brings back any markers that have been on the map since the page was last refreshed.

I'm using MarkerClustererPlus. I don't know whether this would be a bug in MarkerClustererPlus, in Google's code or in my code. Hopefully the latter. I'll include my addMarkers function below. Since I both clear and delete the markers before adding new markers, I don't know how it's possible for the previous markers to come back, nevermind why a zoom change trigger their return:

function addMarkers(map,flag) { 

  clearOverlays();
  deleteOverlays();

  if ('event' == flag) {
    data = himaps_event_data;
  } else if ('story' == flag) {
    data = himaps_story_data;
  } else if ('group' == flag) {
    data = himaps_group_data;
  } else {
    data = himaps_user_data;
  }

  for (var k in data) {
    var item = data[k];
    var latLng = new google.maps.LatLng(item.lat, item.lng);
    var marker = new google.maps.Marker({'position': latLng});
    markersArray.push(marker); 
  } 

  var markerCluster = new MarkerClusterer(map, markersArray);  
}

Also, if I change zoom, then the markers don't clear anymore. They just continue to accumulate on the map if I click the buttons to change category. That definitely doesn't happen if I don't change the zoom level.

By request, here's more of the code:

function clearOverlays() {
  if (markersArray) { 
    for (var i = 0; i < markersArray.length; i++ ) {
      markersArray[i].setMap(null);
    }
  }
}

function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

/* map controls */
(function($) {
  Drupal.behaviors.himaps = {
  attach: function(context, settings) {
    $('.map-controls button').click(function() {
      flag = this.id.replace('map-',''); 
      addMarkers(map,flag);
    });
  }
  }
})(jQuery);


/* homepage map */
function newMap(clat,clng) {
  if (!clat) {
    clat = 37.65;  
  }
  if (!clng) {
    clng = -97.43;  
  }
  var myOptions = {
    scrollwheel: false,
    mapTypeControl: false,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    panControl: false,
    panControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    draggable: true,
    center: new google.maps.LatLng(clat, clng),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  return new google.maps.Map(document.getElementById("map-canvas"), myOptions);

}

var map;
var markersArray = [];
var geocoder; 
var marker;
var listener;

google.maps.event.addDomListener(window, 'load', initmapping);

function initmapping() { //aka initialize()
  map = newMap();
  addMarkers(map,'group');
  geocoder = new google.maps.Geocoder();
}

Last but not least, here is the MarkerClustererPlus library: http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.9/src/

Answer 1

I don't know much about MarkerClusterer but what appears to be happening is every time you call your addMarkers function you are creating a new MarkerClusterer but the old one is never destroyed/removed, hence on zoom change all instances you have created redraw the markers they have. Try the clearMarkers or removerMarkers method of MarkerClusterer and also only create one instance of MarkerClusterer and reuse it instead of creating a new one each time you cal addMarkers.