0

I have a contacts page with google map. When user scrolls down map covers full screen on mobile device.

I want to allow users to scroll the map only on click+drag and not on simple scrolling, so that user could scroll out of the map.

Any ideas?

sniurs
  • 135
  • 4
  • 13
  • Have you looked at this http://stackoverflow.com/questions/4531052/how-can-i-disable-scrolling-on-the-google-maps-mobile-layout – Verma Apr 15 '15 at 20:18

1 Answers1

2

Two methods i know using Hammer Js to handle the Double Taps.

One is to add an overlay on the map and change its z-index value as required. The bonus with the overlay is that no additional code is needed to disable any interaction on the map if needed, e.g markers click and controls.

Two is to use the in-build Gmaps .setOptions({draggable: true/false} function.

Method one Demo Note. Adjust CSS width, height, position for your Map(s)

http://jsfiddle.net/gmqctmkd/

CSS

.overlay {
position:absolute;
height:300px;
width:100%;
background:transparent;
z-index:99;
top:0;
left:0;
}

Code

mc.on("doubbletap", function(ev) {

 $(".overlay").css("z-index", "1");

})

Method Two Demo Using .setOptions({draggable: true/false}

http://jsfiddle.net/oom5uevt/

Code

// set map Options to disable drag.

map.setOptions({draggable: false});

// enable drag 

mc.on("doubbletap", function(ev) {

map.setOptions({draggable: true});

})
Tasos
  • 5,321
  • 1
  • 15
  • 26
  • I am actually looking for a solution to allow user to pan on the map only on double tap + drag. – sniurs Apr 16 '15 at 06:38
  • Double tap on map, on second tap leave finger on screen and move it to move the map. – sniurs Apr 16 '15 at 18:48
  • @sniurs So instead of click a button, double tap on the map. ok then i suggest using Hammers Js plugging to handle the double taps -- demo -- http://jsfiddle.net/gmqctmkd/ – Tasos Apr 16 '15 at 20:41