Fundamental performance problems with MarkerClusterer

I have tried and failed to resolve performance problems with having many markers using the MarkerClusterer. I now believe that the performance issue is an architectural limitation caused by the fact that for each Marker a <div></div> is rendered and performance decreases lineairly with increasing numbers of markers.

The MarkerClusterer is intended to deal with many markers and it’s not working as advertised. I would recommend rewriting this and use the clusterer api more directly, avoiding a dom node for every marker. I can share the code I wrote based google-map-react as I was forced to move away from react-google-maps. Certainly not as elegant as it could be, but I was under a time crunch.

[JvB94]

Hi, I had the same problem. I was helped to hand over the prop “noRedraw” to the marker. The problem is that otherwise for every marker that is added or deleted the entire card is reloaded.

[ariccio]

My own marker drawing code is a bit janky due to excessive reloads from the server, but it does seem like banning all redraws caused a bug where non-clustered points disappeared.

If you’re coming ere from google, what you actually probably want is to do something like this as long as you know how many markers you’re going to add ahead of time:

    let noClustererRedraw = undefined;
    if (index === (placesSize - 1)) {
        noClustererRedraw = false;
    }
    else {
        noClustererRedraw = true;
    }
    return (
        <Marker position={pos} key={/*code for key item*/} clusterer={clusterer} onClick={clickHandler} noClustererRedraw={noClustererRedraw} />
    )

Depending, of course, on your own personal code style preferences. I prefer if/else to inline ternary operators. In a language were function calls weren’t so miserably slow, I’d also factor that out to a function 😃