visgl
InfoWindows are unable to overflow out of the GoogleMap component
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.
- Load up an example with markers/advanced markers and an info window
- Pan the map around so that a marker is towards the very top of the map
- Click/hover the marker to make the info window popup
- Pan around the map to make the info window cutoff the screen/map
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
This is working as intended. The Map is the outer boundary for anything happening within the map. Besides this being implemented this way in the Google Maps API (so the only thing we could do would be to hack our way around it), I don't see an alternative that wouldn't cause problems for most use-cases.
Do you have any idea's how I could accomplish this with react-dom createPortal? When I try to use it, it seems to be ignored.
You can't use the built-in components to do this, since all of them will render within the DOM context of the map (and the main container that has overflow:hidden, iirc).
Essentially, you could use the google.maps.OverlayView class to get screen coordinates for a given geographic location, then use that to position your own html elements within the page.