How can I disable scrolling on the Google Maps mobile layout?

Question

I am developing mobile sites with Google Maps embedded via the Google Maps API. I have been able to stop certain types of behavior but have been unable to find a good way to stop the map from scrolling as I finger scroll down the page on the iPhone. Here is the code I am using:

<script> function initialize() {   var mapElem = document.getElementById("map"),       myOptions = {         zoom: 13,         center: new google.maps.LatLng(41.8965,-84.063),         navigationControl: true,         navigationControlOptions: {           style: google.maps.NavigationControlStyle.SMALL,           position: google.maps.ControlPosition.TOP_RIGHT         },         streetViewControl: false,         mapTypeControl: false,         disableDoubleClickZoom: true,         scrollwheel: false,         backgroundColor: '#f2efe9',         mapTypeId: google.maps.MapTypeId.ROADMAP       },       map = new google.maps.Map(mapElem, myOptions); } </script> <script src='http://maps.google.com/maps/api/js?sensor=false&callback=initialize'></script> 

Thanks in advance.

Answer 1

Validate whether ontouchend is available in document.

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