How to move inside google maps only with two fingers?

问题

I have a big problem for mobile users:

i have a google maps that has width: 100% and so when the user scroll the window if touch the screen "inside" the map, the scroll it will be only for map and not for all window... (yesterday my father for 3 minutes scrolled inside the map XD)

To scroll the window is possible touch the border of screen, but is very very scrict and not all users understand this. I dont'want a map with a width less of 100% so i must found other solution...

This is it will be make the map draggable only when it is touch with two fingers, almost when pinch to zoom...

but which google maps event i can to use ?

maybe:

    google.maps.event.addListener(map, 'dblclick', function(event){
      this.setOptions({draggable:true});
    });

but maybe at first click on map i should to alert (with a div in map) that is possible to move the map with two fingers ??

What do you think? and code is correct?

Thanks a lot and sorry for my english and for strange question :D

回答1:

If you are using API v3.27 or higher. While initializing map just add property gestureHandling: 'Cooperative'

like this

var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng,
          gestureHandling: 'cooperative'
        });

More Info Here

Or if you want to do this after creating the map, do

map.setOptions({gestureHandling: 'cooperative'});

More Info Here

回答2:

Although this is quite strange requirement, you can try the following;

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    if(e.touches.length == 2){
      //This means there are two finger move gesture on screen
      googleMapsReference.setOptions({draggable:true});
    }
}, false);

I have not tested this on a mobile device but it should give you a starting point.

来源：https://stackoverflow.com/questions/38027061/how-to-move-inside-google-maps-only-with-two-fingers