How do I point to a location on map with a click event

Question

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>

score 0 · Answer 1 · answered Feb 07 '22 at 16:12

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!'}
          />

How do I point to a location on map with a click event

1 Answers1