Google maps embeds are a very popular feature on most websites, especially on pages such as ‘Contact Us’ etc. However one very annoying outcome that many people fail to consider from a UX (User Experience) perspective is how annoying these embedded maps are, especially when they’re large, or 100% width as they can mess up touch scrolling and make it difficult to scroll past the map, as the map starts to interface and pan around.

To disable the draggable mode on iPhones and Mobile devices (or in this case, devices with a smaller screen) we can use the following code:

First of all, we use Javascript to check whether the current browser width is greater than my choice/limit of 480px. If the browser is greater than 480, then we allow dragging, else we disable dragging. We then use the isDraggable variable in your Google maps object/setup options.

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

var isDraggable = w > 480 ? true : false;
var mapOptions = {
  draggable: isDraggable,
  scrollwheel: false
};

Option 2:
Thanks to Simon East in the comments, there is also this solution which detects whether the device has touch capability, if so it disables dragging.

var isDraggable = !('ontouchstart' in document.documentElement);
var mapOptions = {
  draggable: isDraggable,
  scrollwheel: false
};