visgl / visgl/react-google-maps
[Bug] "AdvancedMarkerElement: map invalid: not an instance of MapsApiMap"
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.9k
- Forks
- 193
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 13
Description
Description
We keep getting this error:
AdvancedMarkerElement: map invalid: not an instance of MapsApiMap
I'm not sure what's causing this issue to occur, but we keep running into it. There are a few things to note about our usage:
- We're using the
AdvancedMarkerto create aTooltipMarkercomponent - Our app renders a list of pages, each with their own
Map, each receiving a unique location
At first I thought the error was perhaps being caused by some mounting/unmounting behavior that happens when switching between pages, or by how we implemented TooltipMarker, but I'm honestly not sure.
Steps to Reproduce
https://codesandbox.io/p/sandbox/advancedmarker-example-cyycp9
Getting the error to show up consistently is... not easy. The codesandbox linked above shows how the app is set up at a basic level, i.e. multiple pages rendering their own Map and a basic TooltipMarker implementation using AdvancedMarker.
Environment
- Library version: 1.1.1
- Google maps version: weekly
- Browser and Version: Chrome 128
- 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 with the linked CodeSandbox and its multiple-page Map and TooltipMarker setup, then inspect the AdvancedMarker integration while reproducing the intermittent map-invalid error during page changes. Done means identifying and resolving the issue so the error no longer occurs in the reproduced setup, with relevant regression coverage if an existing test entry point applies.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100