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

Solution 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

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