Map Freezing and Becoming Unresponsive After Marker Drag

[mustafaldaher]

I’m encountering an issue where the map freezes and becomes unresponsive when I try to update the marker’s position programmatically using lat and lng while keeping the drag functionality enabled.

const [markerPosition, setMarkerPosition] = useState({
    lat: 59.86157280661541,
    lng: 17.64171716262655,
  });

<GoogleMap
  apiKey={'GOOGLE_MAPS_API_KEY'}
  defaultCenter={{ lat: 59.8615, lng: 17.6417 }}
  defaultZoom={5}
  options={mapOptions}
  mapMinHeight="600px"
  onGoogleApiLoaded={onGoogleApiLoaded}
  onChange={onMapChange}
>
  <Marker
    lat={markerPosition.lat}
    lng={markerPosition.lng}
    className={styles.marker}
    draggable={true}
    onDragEnd={(e, { latLng }) => setMarkerPosition({ lat: latLng.lat(), lng: latLng.lng() })}
  />
</GoogleMap>

[giorgiabosello]

Hi @mustafaldaher, marker is already updated onDragEnd, you shouldn't be setting its position again.
Only use the state to set its default position.

[mustafaldaher]

@giorgiabosello
Thank you for the response! I understand that the marker's position is updated via onDragEnd, and I shouldn't set the position again for drag functionality.

I want to change the marker's position using state, without involving the drag functionality. Is there a recommended approach for updating the marker’s coordinates in such cases?

Thanks again for your help!

[giorgiabosello]

@mustafaldaher Yes, just update lat and lng props without the onDrag. You can check how to do it in the /docs of the repository, and the live example in the demo :)