How to click on markers in Google-Map-React?

Question

my implementation of GoogleMapReact looks like this:

<GoogleMapReact
  key={mapMarkers}
  onGoogleApiLoaded={initGeocoder}
  options={{
    disableDefaultUI: true,
    disableDoubleClickZoon: true,
    draggable: false,
    scrollwheel: false,
    zoomControl: false,
   }}
  distanceToMouse={() => {}}
  bootstrapURLKeys={{ key: myKey }}
  defaultZoom={5}
  defaultCenter={{
    lat: -27,
    lng: 133,
  }}
  yesIWantToUseGoogleMapApiInternals
>
  {mapMarkers.map((marker) => (
   <Marker lat={marker.lat} lng={marker.lng} onChildClick={() => markerClicked(marker)} />
   ))}
</GoogleMapReact>

however, when I click on the marker, the console.log() in markerClicked is never called?

const markerClicked = (marker) => {
    console.log('clicked...')
    console.log('The marker that was clicked is', marker)
}

how can I simply click on the marker as I want to show additional information once clicked?

I thought onChildClick would work according to the docs but nothing is happening

Answer 1

Is "onChildClick" a valid props? I'm not sure about the Marker component, where did you import it?

Can you try "onClick"?

In my example (another place: Dynamically Adding Markers on google-map-react) I used AnyReactComponent naturally from the author, there should be a declaration for that component, and should also declare "onChildClick" props, like this:

const AnyReactComponent = ({  img_src, onChildClick }) => <div onClick={onChildClick}><img src={img_src} className="YOUR-CLASS-NAME" style={{}} /></div>;

...

                <AnyReactComponent
                  lat={marker.lat}
                  lng={marker.lng}
                  img_src={marker.img_src}
                  onChildClick={() => markerClicked(marker)}
                />

---

I think you can just try using "onClick" instead of "onChildClick" in your case (on the Marker component) => If it's still not working, feel free to add more details to your example, import components from where, etc.

Thanks