diff --git a/src/google_map.js b/src/google_map.js index 399fe050..f905f35d 100644 --- a/src/google_map.js +++ b/src/google_map.js @@ -186,6 +186,10 @@ 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 @@ -313,6 +317,7 @@ 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); detectElementResize.addResizeListener(mapDom, that._mapDomResizeCallback); if (this.overlay_) { @@ -814,6 +819,15 @@ 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]))