CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Canadaka
Canadaka

Reputation: 345

Google Maps API v3: Markers not being removed

I'm creating a map that loads & destroys 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 market 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 http://www.trailforks.com/map/test.php?lat=49.352247&lon=-123.202413 the JS is http://www.trailforks.com/map/includes/map.js

the code for deleting a marker is at the bottom

function clearMarkerMemory(mapItem, i) {
  google.maps.event.removeListener(mapItem.lis);    // remove stored listener

  mapper.data[i].obj.setMap(null); // remove marker
  mapper.data.splice(i, 1);

  console.log("removed marker "+mapItem.icon+":"+mapItem.nid+' '+mapItem.name);
};

I added some more debug into to the console, going to a simple area of the map with only 2 markers http://www.trailforks.com/map/test.php?lat=49.43210641783767&lon=-123.49878636730955&z=14

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.

enter image description here

Upvotes: 9

Views: 3150

Answers (2)

jylauril
jylauril

Reputation: 575

I was struggling with similar problem for a long while until I realized that the map marker's setMap-method is asynchronous. When you call that and immediately remove any references to that marker object, the browser's garbage collector steps in and cleans it up from the memory and thus prevents the actual remove operation from happening.

Try it out by just commenting out the line with the splice call and see if that helps. If it does help, you should consider delaying the removal of the object, or alternatively storing the reference to the marker object until it's really removed. How to detect if it's really removed? I have no idea.

I hope this helps!

Upvotes: 4

Marcelo
Marcelo

Reputation: 9407

Instead of doing:

 google.maps.event.addListener(map, 'dragend', function() {  refreshMarkers(); }); //refresh markers when user moves map
 google.maps.event.addListener(map, 'zoom_changed', function() {  refreshMarkers(); }); //refresh markers when user moves map

change it to:

EDIT, (after comments):

To prevent multiple instances of the event handler occurring simultaneously, a global variable could be used, as follows:

google.maps.event.addListener(map, 'bounds_changed', function() {  
if (processing) { // var processing is global
    return;
}
processing = true;
refreshMarkers(); 
processing = false;

}); //refresh markers when user moves map

That should cover both situations. As it is now, with two different event listeners, the AJAX calls could be conflicting, and you maybe firing a second call before the first one has completed.

Upvotes: 0

Related Questions