Borja Borja - 20 days ago 14
Javascript Question

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

Answer

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.