Google Maps API swipe on mobile conflicts with screen scrolling

Question

As users view my site on mobile, sometimes they get into a situation where Google Maps scrolls into view and covers up the entire page. They can no longer scroll away because as they swipe up or down they'll only pan the view in Google Maps and not scroll the webpage.

Traditionally my fix on mobile was this:

var mapOptions = {
  draggable: false,
  panControl: true,
}

That basically disabled swipe events on Google Maps so users can swipe to scroll the webpage. If users want to actually pan the map they can click on the pan button UI.

As of version 3.22, Google Maps API has disabled the pan control button see official google doc. This creates a big problem for me - There is no other way to pan the map if I disable "draggable"

How can I let users have the ability to scroll the webpage using swipe gestures while also let them pan the map if they want to?

Answer 1

This completely depends on your your site's design/flow. I can offer up a couple solutions that I had to implement based on a similar situation to yours.

1) If the map is not a main content of your page, you can simply check if the browser is a mobile browser and replace the map div with a static map image that when clicked opens up a page dedicated to the map.

2) You can layer an action on top of the map that toggles the disabled property of the map via map.setOptions({draggable: true/false}); so the user can switch this on and off themselves.

Answer 2

This previous answer works. And allows it to be draggable for non-touch devices.

var myOptions = {
    // your other options...
    draggable: !("ontouchend" in document)
};
map = new google.maps.Map(mapElem, myOptions);