Marker onClick method not working

[flaviobvds]

Verify latest release

• I verified that the issue exists in the latest release

I know how to solve the bug

I don't know how to solve the bug and I will provide an example.

Link to the code that reproduces this issue

example below

To Reproduce

I'm trying to set a callback function when clicking on a marker.
Here's my code:

<GoogleMap
    apiKey={apiKey}
    defaultCenter={defaultProps.center}
    defaultZoom={defaultProps.zoom}
    options={mapOptions}
>
    <Marker
        lat={2.84246001583857}
        lng={-60.714896175459955}
        onClick={() => {console.log('clicked!')}}
        text="My Marker"
    />
</GoogleMap>

However, nothing happens.
I also noticed that despite a callback for the marker click is shown on the usage example, there's no documentation for the onClick property, so I'm not sure if this feature really exists.
How can I pass a callback function when clicking on a marker then?

Describe the Bug

I'm not able to pass a callback function when clicking on a marker.

Expected Behavior

The callback function should work when clicking on a marker.

Which browser are you using? (if relevant)

No response

[giorgiabosello]

@flaviobvds did you manage the prop on the Marker itself? :)

[flaviobvds]

Here's my full code for the GoogleMap and Marker components. How should I add the the onClick property to it?
PS: I'm using typescript.

const Marker = ({ isClicked }: any) => {
    return (
        <div className={styles.pinContainer}>
            <MdLocationPin
                color={isClicked ? "white" : "rgb(7, 64, 9)"}
                size="50"
            />
        </div>
    )
}

interface MapProps {
    apiKey: string
}

export default function Map({apiKey}: MapProps) {
    const [isClicked, setIsClicked] = useState(false)

    const defaultProps = {
        center: {
            lat: 2.84246001583857,
            lng: -60.714896175459955
        },
        zoom: 13
    };

    const mapOptions = {
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
    }

    return (
        <div className={styles.mapContainer}>
            <GoogleMap
                apiKey={apiKey}
                defaultCenter={defaultProps.center}
                defaultZoom={defaultProps.zoom}
                options={mapOptions}
            >
                <Marker
                    lat={2.84246001583857}
                    lng={-60.714896175459955}
                    onClick={() => {setIsClicked(!isClicked)}}
                    isClicked={isClicked}
                    text="My Marker"
                />
            </GoogleMap>
        </div>
    );
}

My idea is to change the color of the marker when it's clicked... but the onClick function never works. I don't know what I'm doing wrong.

[giorgiabosello]

Here's my full code for the GoogleMap and Marker components. How should I add the the onClick property to it? PS: I'm using typescript.

const Marker = ({ isClicked }: any) => {
    return (
        <div className={styles.pinContainer}>
            <MdLocationPin
                color={isClicked ? "white" : "rgb(7, 64, 9)"}
                size="50"
            />
        </div>
    )
}

interface MapProps {
    apiKey: string
}

export default function Map({apiKey}: MapProps) {
    const [isClicked, setIsClicked] = useState(false)

    const defaultProps = {
        center: {
            lat: 2.84246001583857,
            lng: -60.714896175459955
        },
        zoom: 13
    };

    const mapOptions = {
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
    }

    return (
        <div className={styles.mapContainer}>
            <GoogleMap
                apiKey={apiKey}
                defaultCenter={defaultProps.center}
                defaultZoom={defaultProps.zoom}
                options={mapOptions}
            >
                <Marker
                    lat={2.84246001583857}
                    lng={-60.714896175459955}
                    onClick={() => {setIsClicked(!isClicked)}}
                    isClicked={isClicked}
                    text="My Marker"
                />
            </GoogleMap>
        </div>
    );
}

My idea is to change the color of the marker when it's clicked... but the onClick function never works. I don't know what I'm doing wrong.

You are not passing down the onClick prop to the Marker component.

const Marker = ({ isClicked, onClick = () => {} /*, ...props */ }: any) => {
    return (
        <div className={styles.pinContainer}>
            <MdLocationPin
                color={isClicked ? "white" : "rgb(7, 64, 9)"}
                size="50"
                onClick={onClick}
                // or simply, spread down rest of the props {...props}
            />
        </div>
    )
}