Add prop 'onDragEnd' (#754)

API.md

@@ -128,6 +128,9 @@ Default: false
 
 #### onDrag ((map) => void)
 
+#### onDragEnd ((map) => void)
+When the map stops moving after the user drags. Takes into account drag inertia.
+
 #### onZoomAnimationEnd (func)
 
 #### onMapTypeIdChange (func)

CHANGELOG.md

@@ -1,3 +1,5 @@
+Add prop `onDragEnd` to react on the `dragend` event
+
 Add [google-map-clustering-example](https://github.com/istarkov/google-map-clustering-example)
 
 Add prop `onTilesLoaded` to react on the `tilesloaded` event

src/google_map.js

@@ -123,6 +123,7 @@ export default class GoogleMap extends Component {
     onZoomAnimationStart: PropTypes.func,
     onZoomAnimationEnd: PropTypes.func,
     onDrag: PropTypes.func,
+    onDragEnd: PropTypes.func,
     onMapTypeIdChange: PropTypes.func,
     onTilesLoaded: PropTypes.func,
     options: PropTypes.any,
@@ -799,6 +800,15 @@ export default class GoogleMap extends Component {
           this_.dragTime_ = new Date().getTime();
           this_._onDrag(map);
         });
+
+        maps.event.addListener(map, 'dragend', () => {
+          // 'dragend' fires on mouse release.
+          // 'idle' listener waits until drag inertia ends before firing `onDragEnd`
+          const idleListener = maps.event.addListener(map, 'idle', () => {
+            maps.event.removeListener(idleListener);
+            this_._onDragEnd(map);
+          });
+        });
         // user choosing satellite vs roads, etc
         maps.event.addListener(map, 'maptypeid_changed', () => {
           this_._onMapTypeIdChange(map.getMapTypeId());
@@ -835,6 +845,9 @@ export default class GoogleMap extends Component {
 
   _onDrag = (...args) => this.props.onDrag && this.props.onDrag(...args);
 
+  _onDragEnd = (...args) =>
+    this.props.onDragEnd && this.props.onDragEnd(...args);
+
   _onMapTypeIdChange = (...args) =>
     this.props.onMapTypeIdChange && this.props.onMapTypeIdChange(...args);