Keep Google Maps from hijacking page scrolling

Let people scroll past the map

A large map should not trap a visitor who is trying to scroll the page. For a map built with the Google Maps JavaScript API, gestureHandling: 'cooperative' is a better starting point than disabling dragging based on viewport width or touch detection.

It leaves ordinary page scrolling available while retaining deliberate map interaction. This guide does not load Google Maps or make an API request.

Configure your existing map

If your application already has a map instance:

map.setOptions({
  gestureHandling: 'cooperative',
  zoomControl: true,
});

For a new map, after installing Google's documented API loader and configuring your restricted browser key:

async function createMap() {
  const container = document.querySelector('#map');
  if (!container) return;
  const { Map } = await google.maps.importLibrary('maps');
  return new Map(container, {
    center: { lat: 51.4816, lng: -3.1791 },
    zoom: 12,
    gestureHandling: 'cooperative',
    zoomControl: true,
  });
}

createMap().catch(() => {
  document.querySelector('#map-status').textContent = 'The map could not be loaded. Use the directions link instead.';
});

Provide a #map container with a height in your stylesheet, a #map-status message element, and a normal address/directions link that remains usable without the map. Replace the example coordinates with the intended location.

If no interaction is wanted

Use gestureHandling: 'none' together with zoomControl: false for a map that should not be panned or zoomed. Consider whether a simple address and directions link would serve that purpose better.

These are JavaScript API options, not attributes you can apply to an arbitrary Google Maps iframe. They also do not configure Street View. Use the loader, key restrictions, billing and privacy approach appropriate to your project; a browser key is not a server secret, but it should be restricted to the intended websites and APIs.

References: Google Maps interaction options and loading the Maps JavaScript API.

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
};