archive-gh-me/google-map-react
1
0
Fork 0
mirror of https://github.com/google-map-react/google-map-react.git synced 2025-12-08 18:26:32 +00:00
Code Issues Projects Releases Wiki Activity

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

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

This reverts commit 7d1180c5427750e18411874f538ae6bfbbe33498.

* Improve documentation around touch device support

* Fix linting errors
This commit is contained in:
Yoad Snapir 2017-03-10 11:28:28 +02:00 committed by Ivan Starkov
parent d75faf9498
commit 956c0ca5d2
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
API.md
View File

@ -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.

14
src/google_map.js
View File

@ -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]))