Google Maps API v3: Markers not being removed

I’m creating a map that loads & destroys Google maps v3 markers based on both the bounding box and zoom level. I’m having a real problem getting markers to properly be removed, it seems to work sometimes for certain situations.

I have an object that contains the marker info, which also contains the google maps marker object. My code detects if the marker should be deleted based on the bounding box or zoom-level. I set the marker object to “setMap(null);” and using firebug I can see that its being set, I then remove the parent object entirely and the objects data length is updated properly.

I output to the firebug console when a marker is supposedly deleted, seems to be working and I can see that the marker isn’t being re-crated from the ajax call for markers on the boundingbox change.

Yet if I zoom around the map I can sometimes see that the markers are being removed, if I zoom away then pan back holding the mouse down. Or sometimes the markers will all be removed if I zoomout the first time, but if I zoom in again then back out they are not removed.

I must be doing something wrong with the logic of my code, I’m stumped.

You can view the source of the JS is

the code for deleting a marker is at the bottom

function clearMarkerMemory(mapItem, i) {
google.maps.event.removeListener(mapItem.lis); // remove stored listener[i].obj.setMap(null); // remove marker, 1);

console.log(“removed marker “+mapItem.icon+”:”+mapItem.nid+’ ';

I added some more debug into to the console, going to a simple area of the map with only 2 markers

I can see the markers created, then move the map a bit and see that the markers weren’t re-created because they were detected in the marker object. I then move the viewport so one of the markers is off the screen and I can see that the marker is removed and the marker object length updates. But if I pan the map back over the marker is still on the map.