From 260c6d1c76484a3dbfcb412ae26e98066e1fc520 Mon Sep 17 00:00:00 2001
From: Eric Neo <eric@eric-neo.com>
Date: Sat, 21 Sep 2019 03:42:29 +1000
Subject: [PATCH] Add prop 'onDragEnd' (#754)

---
 API.md            |  3 +++
 CHANGELOG.md      |  2 ++
 src/google_map.js | 13 +++++++++++++
 3 files changed, 18 insertions(+)

diff --git a/API.md b/API.md
index 6c1ee56..29daf72 100644
--- a/API.md
+++ b/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)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 983d73d..a4f82a3 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/google_map.js b/src/google_map.js
index ce01631..6c34e80 100644
--- a/src/google_map.js
+++ b/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);