google-maps-react
google-maps-react copied to clipboard
Map onDragStart/onDragEnd not firing
version: 9.4.5
Map
doesn't seem to support onDragEnd
or onDragStart
-they aren't being called no matter what I try.
<GoogleMap
disableDefaultUI={this.props.disableDefaultUI}
google={this.props.google}
initialCenter={this.props.initialCenter}
zoom={this.props.zoom}
mapTypeId={this.props.google.maps.MapTypeId.HYBRID}
onClick={this.handleClick}
onReady={this.handleMapReady}
onDragEnd={this.handleDragEnd}
onDragStart={(x, y) => {
console.log('drag started');
console.log(x);
console.log(y);
}}
/>
onMapReady
and onClick
both seem to work.
For anyone else who ends up here, I'm currently getting around this by setting up event listeners by hand inside my onReady
handler:
handleMapReady = (mapProps, map) => {
map.addListener('projection_changed', () => {
Map.instance = map;
this.setState({ projectionAvailable: true });
});
map.addListener('dragend', () => {
console.log({ lat: map.center.lat(), lng: map.center.lng() });
});
console.warn('Map is ready. Setting projection and map type.');
return map.setMapTypeId && map.setMapTypeId(this.props.type);
};
The event prop is called onDragend, not onDragEnd, isn't it?
There is an error in the code. All events are camelized but only taking whitespaces in account.
Events like bounds_changed
or zoom_changed
have to be called onBounds_changed
and onZoom_changed
respectively.
Please see my comment how to use it here https://github.com/fullstackreact/google-maps-react/issues/518