diff --git a/API.md b/API.md index 13910dbb..53420163 100644 --- a/API.md +++ b/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. diff --git a/src/google_map.js b/src/google_map.js index 4dbfc32b..21035fa2 100644 --- a/src/google_map.js +++ b/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]))