Disable Scrolling On Google Maps – Don’t Let Your Mobile Users Get Stuck In Never Never (Scrolling) Land

A handy little solution to an annoying problem

Javascript coding

Disable Scrolling On Google Maps – Don’t Let Your Mobile Users Get Stuck In Never Never (Scrolling) Land

If you embed a google map on a website then you might not realise but your users might end up in a sticky situation. By default Google Maps lets users scroll around in the map by touching the screen. The problem is that this then overrides the default scrolling and users end up stuck! Not good. Luckily there is a simple solution.
Javascript Version

function initMap(){
var isDraggable = $(document).width() > 480 ? true : false; // If document (your website) is wider than 480px, isDraggable = true, else isDraggable = false

var mapOptions = {
draggable: isDraggable,

scrollwheel: false, // Prevent users to start zooming the map when scrolling down the page
//… options options options
};
}

What the clever bit of code above (thanks coderwall.com) does is detect the device width and then invoke the draggable: isDraggable parameter.

Nice, huh? Just add this code in to the Javascript function that initiates your map and you are good to go.
Or if you are lazy just use CSS to hide it on mobiles 😉

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *