Question

I have a google api3 map. On idle, I calculate the radius of the visible area of the map, perform an ajax request and retrieve all of the markers in the visible area from an xml document.

Then I parse the xml, clear the current map markers and replace them with the new markers.

This works, with two caveats. 1) All of the markers flash when reloading. and 2) This causes me to download and reload markers, even if the user did not move the map far enough for them to be off-screen. In other words, I am reloading a marker that is already on the screen.

What is the best way to pull only the markers in the visible area of the map, and aren’t already on the screen?

I am going for performance, because I have a large amount of markers.

Test Url: http://whosopennow.com/maintenance/test.php# (Pan to Washington, DC)

Answer 1

Assuming the map bounds do not include the International Date Line, or map wraps (you might have to set minimum zoom to 4 or so), I would take the following steps using map.getBounds() (not tested):

1. At all times store the existing visible bounds. I’ll call it lastViewable.
2. When the visible bounds are detected to have changed, perform the Ajax call.
3. For each marker in the XML, if it’s outside lastViewable, add it to the screen. These are the new markers.
4. Now, let’s say the map was dragged. Markers now outside the viewable area need to be removed.
5. Set lastViewable to the current bounds
6. Remove all markers outside these lastViewable bounds.