How Can We Efficiently Render a Large Number of Markers?

[geunheejung]

We are planning to render over 1000 AdvancedMarker elements with the same latitude and longitude, as shown in the image below. The markers are grouped at identical coordinates, but clustering is not currently planned.

Technical Stack

• Frameworks/Libraries:

  • Next.js 14
  • React 18
  • Data fetching is handled using tanstack/query v5.

• User Behavior:

  1. When users move the map or adjust the zoom level, data within the current bounding box is fetched.
  2. The retrieved data is displayed as markers on the map.

---

Questions

1. Efficient Rendering
   What is the recommended approach for efficiently rendering a large number of markers (e.g., 1000+ AdvancedMarker elements) without significant performance degradation?

2. Maximum Marker Count
   What is the recommended maximum number of markers that can be rendered using this library without encountering performance issues?

---

We would appreciate any advice on ensuring performance and scalability for this feature.

[usefulthink]

First and foremost, this sounds like a UX problem and not so much a technical one, but let's get over the technical side first anyways.

As far as the maps API is concerned, I think a good upper limit for Advanced Markers would be around 500 to 1000, depending on complexity. So 1000 small dots would probably be ok, but 500 full markers with images or such will likely start causing problems.
This is essentially the same for this library, but here you additionally have the same number of react-components to worry about, and you have to make sure that react doesn't accidentally end up constantly re-rendering them.

Then you say there will be multiple markers at the same position. This doesn't really make a lot of sense since you can only render a single marker at any position on the map, multiple markers would only cause total chaos :).

So some grouping has to be done first, which will already reduce the number of markers you have to add to the map.
It's also very likely that not all of your locations are going to be equally important, so you can use the zIndex and collisionBehaviour to reduce the number of markers visible when zooming out.

Maybe it also makes sense to only add markers to the map that are within the bounds of the map, not sure how much optimization the maps API does here automatically.

And finally, with this amount of markers I would consider declaring this a data-visualization problem, and use something like a deck.gl scatterplot layer on top of the map instead of using AdvancedMarkers.

[geunheejung]

Thank you for your detailed response.
For markers that share the same latitude and longitude, only a single representative marker will be displayed. When the representative marker is clicked, a list of the grouped markers will appear. From this list, users can select specific data, which will then be displayed in an InfoWindow.
Currently, we are rendering only the data within the map's visible bounding box.
The AdvancedMarker itself contains text but does not display images. Images are included in the InfoWindow that appears when the marker is clicked. Based on your explanation, is it correct to assume that if there are no images within the AdvancedMarker, the recommended number of markers would be between 500 and 1000?

[usefulthink]

I wouldn't say recommended, but more like "at 500-1000 markers you will probably start seeing performance issues, don't expect 2000 markers to work flawlessly". In the end, every marker is a React component and a set of DOM elements that have to be transformed, rendered, and composited in the browser.

But having 500 markers on the map at the same time isn't very practical. The custom clustering example shows at most 200 markers at a time, and to me that already looks pretty crowded.

[geunheejung]

@usefulthink
Thank you for your response. I have an additional question. While I understand that libraries ultimately use the Google Maps API under the hood, would there be a significant performance difference between implementing it using a React-wrapped library and implementing it without using such a library?

[usefulthink]

There is an added complexity due to it being React Components, and that is another possible source for performance problems.
But this is mainly because extra care has to be taken to avoid situations where react will needlessly re-render the component due to changed props or something like that. Besides that, both solutions have pretty much the same performance profile.