Right click in OverlayView doesn't work #3327
Unanswered
thomastvedt
asked this question in
Q&A
Replies: 1 comment
-
Finally found a solution to this: const MapInfoWindow: React.FC<Props> = ({ position, children, style }) => {
const map = useGoogleMap();
if (map === null) {
throw new Error('MapInfoWindow cannot be used outside a google map context');
}
const myRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (myRef.current) {
// This prevents mouse and tocuh events to pass through the custom OverlayView to the map:
google.maps.OverlayView.preventMapHitsAndGesturesFrom(myRef.current);
}
}, [myRef]);
return (
<OverlayViewF
mapPaneName={'overlayMouseTarget'}
position={{
lat: position.lat,
lng: position.lng,
}}
>
<div
ref={myRef}
onContextMenu={(event) => {
// This stop the right click event from propagating, and will enable the native browser right click menu
event.stopPropagation();
}}
>
{children}
</div>
</OverlayViewF>
);
}; |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
I'm replacing "InfoWindow" with a custom version using the
OverlayViewF
component:I'm able to style this easily, and left-clicking the link works. But right-click does not work 😟
floatPane
is "This pane contains the info window. It is above all map overlays. (Pane 4)."I found this on stackoverflow, and tried the following:
It prints to the console, but I still don't get the native right-click context menu (I want to open the link in a new tab)
In the google maps api OverlayView documentation, I found some interesting static methods
preventMapHitsAndGesturesFrom
andpreventMapHitsFrom
which takes a element. I tried the following:and added a ref to the pink div inside OverlayViewF.
The effect of this is that the mouse cursor looks similar to the native InfoWindow, I can select text and left-click works. But right-click still doesn't work 😵
I also tried the https://github.com/JustFly1984/react-google-maps-api/tree/develop/packages/react-google-maps-api-infobox package, but right-click doesn't work here either.
🫵 Has anyone done something similar before? Any tips on what to try next? 😅 🙏
Beta Was this translation helpful? Give feedback.
All reactions