Stop capturing all touch events and use built in google maps support (#…

…334)

* Revert "Fix ipad dragging issue (#233)"
Using the built in support from google maps would make the component more
mobile friendly.

This reverts commit 7d1180c.

* Improve documentation around touch device support

* Fix linting errors

API.md

@@ -318,3 +318,21 @@ function createMapOptions() {
   };
 }
 ```
+
+### Define touch device behavior of scrolling & panning for the map
+
+Google Maps provides control over the behavior of touch based interaction with the map.
+For example, on mobile devices swiping up on the map might mean two things: Scrolling the container or panning the map.
+To resolve this ambigiuity, you can use the custom map option `gestureHandling` to get the required behavior.
+
+```javascript
+function createMapOptions() {
+  return {
+    gestureHandling: 'greedy' // Will capture all touch events on the map towards map panning
+  }
+}
+```
+
+The default setting is `gestureHandling:auto` which tries to detect based on the page/content sizes if a `greedy` setting is best (no scrolling is required) or `cooperative` (scrolling is possible)
+
+For more details see the [google documentation](https://developers.google.com/maps/documentation/javascript/interaction) for this setting.

src/google_map.js

@@ -191,10 +191,6 @@ export default class GoogleMap extends Component {
     this.mounted_ = true;
     window.addEventListener('resize', this._onWindowResize);
     window.addEventListener('keydown', this._onKeyDownCapture, true);
-
-    // prevent touch devices from moving the entire browser window on drag
-    window.addEventListener('touchmove', this._onTouchMove);
-
     const mapDom = ReactDOM.findDOMNode(this.refs.google_map_dom);
     // gmap can't prevent map drag if mousedown event already occured
     // the only workaround I find is prevent mousedown native browser event
@@ -329,7 +325,6 @@ export default class GoogleMap extends Component {
     window.removeEventListener('keydown', this._onKeyDownCapture);
     mapDom.removeEventListener('mousedown', this._onMapMouseDownNative, true);
     window.removeEventListener('mouseup', this._onChildMouseUp, false);
-    window.removeEventListener('touchmove', this._onTouchMove);
     if (this.props.resetBoundsOnResize) {
       detectElementResize.removeResizeListener(mapDom, this._mapDomResizeCallback);
     }
@@ -850,15 +845,6 @@ export default class GoogleMap extends Component {
     }
   }
 
-  _onTouchMove = (event) => {
-    if (this.refs.google_map_dom) {
-      const mapDom = ReactDOM.findDOMNode(this.refs.google_map_dom);
-      if (mapDom.contains(event.target)) {
-        event.preventDefault();
-      }
-    }
-  }
-
   _isCenterDefined = (center) => center && (
     (isPlainObject(center) && isNumber(center.lat) && isNumber(center.lng)) ||
     (center.length === 2 && isNumber(center[0]) && isNumber(center[1]))