Google Maps API V3 very slow when adding lots of Markers

Question

I have many markers and markerclusterer I need to render on Google Map. I'm currently using the API (v3) and there are performance issues on slower machines. What should I do please?? I'm using ajax and XML

Answer 1

I don't use Markerclusterer but I make sure only the markers in the viewport are set on the map. for me this had significant boost in performance.

I used multiple arrays of markers that act as different layers. These layers are controlled by adding a marker.display attribute after creation wich I later play with. This way these will be ignored even if within the viewport.

Use the "idle" event: the "idle" will fire once the user has stopped panning/zooming, rather then "bounds_changed" event wich fires continuously when panning/zooming.

Add the event to the map in your window.onload function.

        google.maps.event.addListener(map, "idle", function (event) {
            if (map) {
                //This is the current user-viewable region of the map
                var bounds = map.getBounds();
                markerLayers.forEach(function (layer) {
                checkVisibleElements(layer, bounds);
                });
                checkVisibleElements(searchMarkers, bounds);
                //Loop through all the items that are available to be placed on the map
            }
        });


    function checkVisibleElements(elementsArray, bounds) {
        //checks if marker is within viewport and displays the marker accordingly - triggered by google.maps.event "idle" on the map Object
        elementsArray.forEach(function (item) {
            //If the item is within the the bounds of the viewport
            if (bounds.contains(item.position) && item.display == true) {
                //If the item isn't already being displayed
                if (item.map!=map){
                item.setMap(map);
                }
            } else {
                item.setMap(null);
            }
        });
    }

more info about the API(*) : Google Maps API : To Many Markers!

(*) original link dead, archived version from archive.org

Answer 2

This is a known issue with gmap . For now, follow the suggestion to bulk add to the DOM as mentioned at this link .

Side note, there are ways to add markers in bulk including MarkerLight and MultiMarker that may be fast enough for your needs without direct DOM manipulation.

Answer 3

If your custom marker is using a path, try using a url to an image (eg svg) instead. Path rendering is slow, but a (shared) icon is much faster.

Answer 4

I've found that this depends on the marker you are using. If you are using the standard marker, I've had no issues with even 20K markers. When using one of the symbols or a custom path though, it can barely handle 1K. A work around to this though is to use an image as your marker if you need a custom shape/color. You can generate the varying images for your markers and then select which to use based on criteria.