In React, I'm trying to make an onClick event point a marker on a map to a new location using google-map-react library. My map is showing and I have a button on the map but I'm not sure how to make a marker on the map point to a new coordinates I have. The documentation on google-map-react isn't very helpful. I've tried to set new coordinates using the onChildClick parameter as seen in my code below but it isn' t working. The following is a section of my code
...<GoogleMapReact
bootstrapURLKeys={{
key: 'API_KEY',
}}
defaultCenter={mapProp.center}
defaultZoom={mapProp.zoom}
options={mapOptions}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
onChildClick={() => {
setCoord({
latitude: coord.latitude,
longitude: coord.longitude,
});
}}
>
<Button
variant="light"
style={{
position: 'absolute',
left: '-20%',
top: '-340px',
}}
onClick={handleCoordinates}
>
Find new place button
</Button>
{cardVisible && <MyMarker />}
{cardVisible && (
<MarkerComponent
lat={59.965411}
lng={30.377844}
text={'Location Marker info here!'}
/>
)}
</GoogleMapReact>
Your code never updates the location of the marker.
const [coord, setCoord] = useState({latitude: 59.965411, longitude:30.377844});
...
return ...<GoogleMapReact
...
<MarkerComponent
lat={coord.latitude}
lng={coord.longitude}
text={'Location Marker info here!'}
/>