visgl / visgl/react-google-maps
[Bug] Rendering many Advanced Markers as map children is extremely slow
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.9k
- Forks
- 193
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 13
Description
Description
On initial component render, even a few dozen Advanced Markers as map children will take ~ 10 seconds to initially render map. A few hundred can crash the browser.
Interestingly, a workaround is to render 1 marker, then set timeout for > 100ms and render many. OR use legacy Marker component.
Steps to Reproduce
Render 100 AdvancedMarkers as map children (just with key, position props)
Environment
- Library version: 0.5.0
- Google maps version: weekly (3.55.8)
- Browser and Version: Chrome 120
- OS: Mac
Logs
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with 100 AdvancedMarkers rendered as map children, using the reported library and Google Maps versions. Inspect the AdvancedMarker rendering path and compare it with the delayed-render and legacy Marker workarounds. Done means initial rendering no longer takes about 10 seconds or crashes the browser for a few hundred markers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100