Google Maps V3: Only show markers in viewport - Clear markers issue

Question

I like to create a map with Google Maps that can handle large amounts of markers (over 10.000). To not slow down the map I\'ve created a XML-file that only outputs the markers t

Answer 1

You may want to check out this thread. Daniel answered this quite nicely.

What's the most efficient way to create routes on google maps from gps files?

Also, bounds_changed is the first opportunity to call your function. tilesloaded, will be called constantly. The viewport may contain more than one tile to fill the viewport.

Alternatively, you can also do a setVisible(false).

In order to remove the marker, you may need to remove the listeners.

google.maps.event.clearInstanceListeners(marker);
marker.setMap(null);
markers.remove(marker);
delete marker;

Answer 2

Due to the following explanation using 'tilesloaded' or 'bounds_changed' would be very wrong and cause unwilling continuous firings. Instead you would want to use 'idle' event which will fire once the user has stopped panning/zooming.

google.maps.event.addListener(map, 'idle', loadMapFromCurrentBounds);

https://developers.google.com/maps/articles/toomanymarkers#viewportmarkermanagement

Answer 3

You might want to check out this documentation from Google. It explains what you need:

With the new list of markers you can remove the current markers 
(marker.setMap(null)) that are on the map and 
add the new ones (marker.setMap(map)).

Answer 4

Your original function seems like a lot of code. I'd do something like this:

if( map.getBounds().contains(markers[i].getPosition()) ) {
   myMarkerDisplayFunction(markers[i]);
}

Answer 5

You need to add another Event Listener to the map:

google.maps.event.addListener(map,'bounds_changed', removeMarkers);

See here for more on removing all markers from a google map - unfortunately I dont think it can be done with one call. So you will have to write the removeMarkers or something similar which will have to iterate through all the markers on the map removing them individually like so:

 markersArray[i].setMap(null);

I don't know whether it's quicker to check if the marker is in the viewport before removing by using:

 map.getBounds();

Read more about Google Map API v3 events

Answer 6

This article goes through it pretty nicely: Dynamically loading thousands of markers in Google Maps

• dynamically load markers until we reach a threshold
• keep a hashtable of markers that have already been added
• after the threshold has been reached, remove markers that aren’t currently within the viewport
• remove all markers from the map when the user has zoomed out, and don’t load any markers until the user zooms back to a reasonable level