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>
);
}
}