Google map "zoomend" event issue

Question

On my web page, I show "items" as markers on Google map.

I use MarkerClusterer which groups nearby markers into groups depending on the zoom level.

In addition, I only want to add markers that are located within the currently visible map region. And so far things are good. The javascript is as below.

   // main function for the map
   function initialize() 
   {
      if(GBrowserIsCompatible()) 
      {
         var map = new GMap2(document.getElementById('map'));
         map.setCenter(new GLatLng( default_latitude, default_longitude),6);
         map.addControl(new GLargeMapControl());

         // put items in the map only those are visible
         var markers = assign_items(map);
         var markerCluster = new MarkerClusterer(map, markers);
      }
   }

The function assign_items goes through an array of items (which is derived from PHP) and checks if the item has latitude and longitude which are WITHIN the current map. Its method is as below.

// assign items that are within map boundaries
function assign_items(map)
{
   var icon = new GIcon(G_DEFAULT_ICON);
   var markers = [];
   var map_bounds = map.getBounds();

   <?php 
      foreach($items as $item) 
      { 
   ?>
         var latlng = new GLatLng( <?php echo $item->latitude; ?>, <?php echo $item->longitude; ?>);

         // check if item is within the map
         if( map_bounds.containsLatLng(latlng) )
         {
            var marker = new GMarker(latlng, {icon: icon});
        markers.push(marker);   
         }
   <?php        
      }
   ?>
   return markers;      
}

Now, because we are only including the items that are visible in the current map, if the user moves the map around, we want to reassign the items to the map again. I do this by capturing the "moveend" event.

// function for handling when the map is moved                  
GEvent.addListener(map, "moveend", function() 
{
   // put items in the map only those are in the map
   map.clearOverlays();
   var markers = assign_items(map);
   var markerCluster = new MarkerClusterer(map, markers);
}

So far, everything works fine. I can move the map around, items are reassigned properly. Beautiful. Now here comes the problem.

If user "zooms" in and out of the map, the items must be also reassigned to the map. So I do this in a similar way as capturing "moveend" event.

// function for handling when the map is moved                  
GEvent.addListener(map, "zoomend", function() 
{
   // put items in the map only those are in the map
   map.clearOverlays();
   var markers = assign_items(map);
   var markerCluster = new MarkerClusterer(map, markers);
}

HOWEVER, when I do this, what happens is the items are reassigned ON TOP OF the all the items that are already on the map.

In fact, map.clearOverlays() works fine. It clears all the items off the map. Then assign_items(map) function adds the necessary items on the map.

However, it looks like it's reusing the map so the items are not actually cleared.

Even when I do just this.

GEvent.addListener(map, "zoomend", function() 
{
   // put items in the map only those are in the map
   map.clearOverlays();
}

The items are added TWICE on the same map.

I know this post has been a long one. But if you could please enlighten me with your answers, that would be much appreciated.

Thank you.

PS : I've also tried "zoomto" event, but the same thing happens.