onClick OverlayView react-google-maps

Question

I can't understand why the onclick in the OverlayView doens't work. I've put a custom object (a simply div) as child, is the BaloonLocationJob.

How can make the OverlayView clickable?

<GoogleMap
        defaultZoom={16}
        defaultCenter={{ lat: props.job.latitude, lng: props.job.longitude }}
        options={{mapTypeControl:false,navigationControl:false,streetViewControl:false,scaleControl:false}}>
        {
            <OverlayView
                key={Math.random()}
                position={{ lat: props.job.latitude, lng: props.job.longitude }}
                onClick={props.hello}
                mapPaneName={OverlayView.OVERLAY_LAYER}>
                <BaloonLocationJob address={props.job.address} onClick={props.onToggleOpen/* todo: this isn't working*/}/>
            </OverlayView>
        }
</GoogleMap>

I don't think `OverlayView` can have a `onClick` prop, but the component inside of it can. Doesn't `onClick={props.onToggleOpen}` work? — Tholle, Nov 09 '18 at 14:54
unfortunally this was my first try.. onclick in the child element doesn't work neither — Meesta, Nov 09 '18 at 15:54

score 1 · Answer 1 · answered Nov 10 '18 at 10:31

Found the problem. It was my fault, I didn't read properly the doc. I just changed the mapPaneName prop in the OverlayView component:

    <OverlayView
            key={Math.random()}
            position={{ lat: props.job.latitude, lng: props.job.longitude }}
            mapPaneName={OverlayView.OVERLAY_LAYER}>
            <BaloonLocationJob address={props.job.address}  onClick={props.onToggleOpen}/>
        </OverlayView>

to:

    <OverlayView
            key={Math.random()}
            position={{ lat: props.job.latitude, lng: props.job.longitude }}
            mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}>
            <BaloonLocationJob address={props.job.address}  onClick={props.onToggleOpen}/>
        </OverlayView>

onClick OverlayView react-google-maps

1 Answers1