javascript - How to move inside google maps only with two fingers? - Stack Overflow

admin管理员组

文章数量:1202802

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

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

• javascript
• google-maps
• mobile
• google-maps-api-3
• user-experience

Share Improve this question Follow asked Jun 25, 2016 at 9:39 BorjaBorja 3,55177 gold badges3737 silver badges7474 bronze badges 2

• why downvote me ? – Borja Commented Jun 25, 2016 at 9:56
• This is very usefull for mobile scrolling. I notice today that Google has added a native block for one finger move, now, at least when using the API, u can only move the map with two fingers. e.g.: cmwautomacao.com.br/contato.php – Machado Commented Dec 1, 2016 at 19:32

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 20

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

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.

本文标签： javascriptHow to move inside google maps only with two fingersStack Overflow