Question

I've got 4 different types of markers on single map. Currently a slideshow rotates through each type, hiding the other 3. There is a MarkerClusterer object for each different type of marker so that they do not cluster together.

The issue I am having is that the heap snapshot in chrome shows I'm increasing the amount of memory in use by about 2mb every 5 minutes or so. This is my code currently:

function transitionMarkers() {
    if (isSlideShowActive) {
        for (var i = 0; i < markers.length; i++) {
            if (nutrientsArray[slideShowCounter] === markers[i].address.SOURCE_GROUP) {
                markers[i].setVisible(true);
            } else {
                markers[i].setVisible(false);
            }
        }
        for (var n in types.NUTRIENTS) {
            for (var sc in types.SOURCE_CODES) {
                if (nutrientsArray[slideShowCounter] === n) {
                    markerClusters[n][sc].setMap(map);
                } else {
                    markerClusters[n][sc].setMap(null);
                }
            }
        }
    }
    incrementSlideShowCounter();
}

Markers have the ability to change their visibility, and since they will be re-rendered within a minute, I don't bother using setMap(null) on them. However, marker clusters do not have this option. When I examine the heap snapshot, I see thousands of objects that look like this:

[1076] :: pf @2451465 5 360 % 2 3360 %
b :: gi @2273271 2 120 % 170 5441 %
e :: function() @2454527 6 360 % 2 3000 %
proto :: pf @2338839 5 120 % 360 %
d :: "bounds_changed" @67519

It looks like there are thousands of these bounds_changed events sitting there accumulating...my map only hides or shows markers, it doesn't move around, zoom in or out, or anything like that.

Any thoughts?

Was it helpful?

Solution

These bounds_changed-events will be bound to the map when a ClusterIcon will be added(happens all the time when you call markerClusters[n][sc].setMap(map)).

When you call markerClusters[n][sc].setMap(null) the ClusterIcons will be removed, the onRemove-method also clears all listeners bound to the ClusterIcon-instances, but the onRemove-method does not remove the bounds_changed-events bound to the map(you may call it a bug).

So you may either fix the bug on your own and modify the markerclusterer.js so that it also removes the bounds_changed-event, or don't call setMap() at all, instead you may e.g. call the methods show() or hide() of the ClusterIcon-instances to show or hide them(should give a better performance).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top