visgl / visgl/react-google-maps

[Bug] "AdvancedMarkerElement: map invalid: not an instance of MapsApiMap"

Open
#540 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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 AdvancedMarker to create a TooltipMarker component
  • 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.