Right click in OverlayView doesn't work

[thomastvedt]

I'm replacing "InfoWindow" with a custom version using the OverlayViewF component:

  return (
    <OverlayViewF
      mapPaneName={'floatPane'}
      position={{
        lat: position.lat,
        lng: position.lng,
      }}
      key={position.lat + position.lng}
    >
      <div style={{
        background: 'pink',
        padding: 8
      }}>
        <a href={'url'}>Link</a>
      </div>
    </OverlayViewF>

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:

  const map = useGoogleMap();

  const allowAnchorRightClicksHandler = useCallback((event: unknown) => {
    console.log('right click', event);
    // eslint-disable-next-line
    const e = event as any;

    if (e.domEvent && e.domEvent instanceof PointerEvent) {
      if (e.domEvent.target?.nodeName === 'A') {
        console.log('you clicked a link!');
        e.domEvent.cancelBubble = true; // the old way of doing it, IE9..
        if (e.domEvent.stopPropagation) {
          console.log('trying to stop event propagation');
          e.domEvent.stopPropagation();
        }
      }
    }
  }, []);

  useEffect(() => {
    const contextMenuListener = map.addListener('contextmenu', allowAnchorRightClicksHandler);
    return () => {
      google.maps.event.removeListener(contextMenuListener);
    };
  }, [allowAnchorRightClicksHandler, map]);

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 and preventMapHitsFrom which takes a element. I tried the following:

const ignoreElement = (element: Element) => {
  console.log('ignore element', element);
  google.maps.OverlayView.preventMapHitsAndGesturesFrom(element)
}

  useEffect(() => {
    if (myRef.current) {
      ignoreElement(myRef.current);
    }
  }, [myRef]);

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? 😅 🙏

[thomastvedt]

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>
  );
};