How to load 100000 markers, react+google maps?

Question

JavaScript

Good afternoon! Can you please tell me how to do it the right way?
The task is to build a path on the map with a large number of points (approximately 100,000). I make the line itself with the help of Polyline, it is built quite quickly. Problems appear when I start displaying markers, everything starts to freeze (even if I display only 1000 pieces). I
use clustering, but it still freezes.
There is nothing like that in the markers, only one div.
The question is how to load markers so that everything works great?
Project on react + google maps.
Thank you!

Answer 1

to use clustering on the server only remains.
There is no way that such a volume will work normally at the front, and it is not needed there at the same time.
Those. from the server, pull only markers that are in a given square of the map.
And when the zoom is far, then give clusters ready from the server.

Answer 2

Render no more than 50-100 markers per screen. When changing the scale - extrapolate. Those. you need to make your own number of markers for each level of the map scale. When moving the map - hide invisible markers, visible ones - show. Even better, if there are no more than 20-30 markers on the screen, another 20-30 can be made invisible on both sides of the route so that the user does not see their rendering when scrolling. Better yet, use Canvas to render the markers.