visgl / visgl/react-google-maps

InfoWindows are unable to overflow out of the GoogleMap component

Open
#744 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.9k
Forks
193
Avg merge
3d 16h
Merged PRs (30d)
13

Description

Description

When using the InfoWindow component, hovering over markers or advanced markers can leave the info window pop up to be partially cut off or all of the way hidden depending on the pan/zoom of the map. There is no way that I have found to custom style the markers or info window component to allow the info window to overflow/pop out of the GoolgleMap component. The z-index prop does not seem to effect his behavior either.

Steps to Reproduce

The easiest example to repro this on is https://visgl.github.io/react-google-maps/examples/advanced-marker-interaction.

  1. Load up an example with markers/advanced markers and an info window
  2. Pan the map around so that a marker is towards the very top of the map
  3. Click/hover the marker to make the info window popup
  4. Pan around the map to make the info window cutoff the screen/map

Image

Image

Environment
  • Library version: ~1.5.1
  • Google maps version: weekly
  • Browser and Version: Chrome Version 134.0.6998.178 (Official Build) (64-bit)
  • OS: Windows
Logs

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 advanced-marker-interaction example linked in the report and reproduce the cutoff by moving a marker near the map edge before opening its InfoWindow. Investigate the reported overflow and z-index behavior; done means the InfoWindow remains usable rather than partially or fully hidden when the map is panned or zoomed.

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.