Right click doesn't work in InfoBox component about react-google-maps-api

[thomastvedt]

Maybe this can be used?
google.maps.OverlayView.preventMapHitsAndGesturesFrom(element)

[thomastvedt]

I finally figured this out.

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

I'm writing my own "InfoBox" component based on the OverlayViewF component, and therefore I don't need this to be handled in the "InfoBox" any longer. It still would be nice if this worked out of the box in my opinion, but I'll leave that to someone else ;)