Disable mobile scroll on google map - wordpress

Question

I'm using the WP Google map plugin for my site. When I use my finger to scroll down the mobile page on an iPhone, once I get to the map, the page scrolling is overridden and the map starts panning. The only way for me to scroll farther down the page is to put my finger above or below the map, assuming such space is available.
Is there a way to solution to this? Something along the lines of disabling the mobile scroll?
Link: http://zaaroinfotechsolutions.com/zaarodemo/longbeach/contact-us/

Answer 1

You should deactivate scroll when initiating the map:
var mapOptions = {
// ...
scrollwheel: false,
// ...
};
Then you can control whether to make the map draggable or not by getting the width of the layout like:
var drag = $(document).width() > 640 ? true : false;
var mapOptions = {
// ...
isDraggable: drag,
scrollwheel: false,
// ...
};
Furthermore, if you want to maintain map navigation functionality in mobile devices, you can do it by setting the panControl - bool, true or false - property in your mapOptions.
Edit: Passing the mapOptions on init
HTML
<div id="map-canvas"></div>
JS
<script>
var map;
function initialize() {
var mapOptions = {
// ... your existent init code
isDraggable: drag,
scrollwheel: false,
// ...
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>