google-maps-react get marker position on drag end

i have a simple solution

<GoogleMapReact
 bootstrapURLKeys={{ key: '' }}
 defaultCenter={this.state.center}
 defaultZoom={this.state.zoom}
 yesIWantToUseGoogleMapApiInternals={true}
 onClick = {this.changeMarkerPosition}
>

then in the function

  changeMarkerPosition =(e)=>{
    this.setState({
    ...this.state,
      details:{
        ...this.state.details,
        lat:e.lat,
        lng:e.lng
      }
    })
  }

this will automatically give the latest co-ordinates and u can move ur marker accordingly by binding it to state.

Above answers not worked for me because onDragEnd returning undefined in my case.

onDragend={(t, map, coord) => this.onMarkerDragEnd(coord, index)}

So I find coordinates by using below line

onDragEnd={(e) => this.onMarkerDragEnd(e.nativeEvent.coordinate)}

You can find it here (Draggable Markers)

https://github.com/react-native-community/react-native-maps

Simple Example

State

state = {
    region: {
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }
}

Marker

<Marker
      coordinate={this.getMapRegion()}
      draggable={true}
      onDragEnd={(e) => this.onMarkerDragEnd(e.nativeEvent.coordinate)}
      title={ "Location"}
  />

onMarkerDragEnd

onMarkerDragEnd = (coord) => {
    let newRegion = {
      latitude: parseFloat(coord.latitude),
      longitude: parseFloat(coord.longitude),
      latitudeDelta: 0.0522,
      longitudeDelta: 0.0321,
    };
    this.setState({
      region: newRegion,
    });
  };

Hope, it will help you.

The third argument to the onDragend event listener function contains the coordinates of the marker after the drag.

Example

class MapContainer extends React.Component {
  state = {
    markers: [
      {
        name: "Current position",
        position: {
          lat: 37.77,
          lng: -122.42
        }
      }
    ]
  };

  onMarkerDragEnd = (coord, index) => {
    const { latLng } = coord;
    const lat = latLng.lat();
    const lng = latLng.lng();

    this.setState(prevState => {
      const markers = [...this.state.markers];
      markers[index] = { ...markers[index], position: { lat, lng } };
      return { markers };
    });
  };

  render() {
    return (
      <Map
        google={this.props.google}
        style={{
          width: "100%",
          height: "300px"
        }}
        zoom={14}
      >
        {this.state.markers.map((marker, index) => (
          <Marker
            position={marker.position}
            draggable={true}
            onDragend={(t, map, coord) => this.onMarkerDragEnd(coord, index)}
            name={marker.name}
          />
        ))}
      </Map>
    );
  }
}