CODEWITHSUNDEEP
reactjsnext.jsreact-google-mapsreact-google-maps-api
Seamar
Seamar

Reputation: 11

React Google Maps OverlayViewF not allowing descendants to be clicked

I'm trying to display an OverlayViewF from @react-google-maps/api in my map but it doesn't let me click on the div inside of it. I am using OverlayViewF instead of OverlayView to avoid the jittery-like movement of the overlays when panning the map.
Note that it is displaying everything perfectly, the issue is that I cannot click the inner div. When I switch from the OverlayViewF to OverlayView, everything works fine (except the jittery movement when panning), and when I hover over my overlay my cursor turns into a pointer as I instructed in the CSS (this doesn't happen with OverlayViewF).

<GoogleMap
  mapContainerClassName={mapContainerClassName}
  center={center}
  zoom={14}
  options={options}
  onLoad={(mapInstance) => {
    mapRef.current = mapInstance;
  }}
  onIdle={handleOnIdle}
>
  {spots.map((spot: any) => (
    <OverlayViewF
      key={spot.id}
      position={{ lat: spot.latitude, lng: spot.longitude }}
      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
      getPixelPositionOffset={getPixelPositionOffset}
    >
      <div
        className="custom-map-overlay"
        onClick={() => router.push(`${Routes.public}/${spot.id}/detail`)}
      >
        {spot.description}
      </div>
    </OverlayViewF>
  ))}
</GoogleMap>

I've tried changing the z-indexes around as well as wrapping the OverlayViewF in a div and giving that div the onClick function, but none of this works.
I've searched for other sources but none that I could find addressed clickables inside the OverlayViewF.
Also, it seems to allow me to click on the inner div if I hover over the overlay, start panning the map, and then click quickly, but this is an irregular interaction I don't want to do every time.

Does anyone have a fix? Thanks in advance.

Upvotes: 1

Views: 158

Answers (1)

DhruvK
DhruvK

Reputation: 346

Try adding a stopPropagation:

onClick={(e) => {
    e.stopPropagation();
    handleClick();
}}

Upvotes: 0

Related Questions