Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.google.com/maps/documentation/javascript/interaction below:

Controlling Zoom and Pan | Maps JavaScript API

Stay organized with collections Save and categorize content based on your preferences.

The usage of a map on a web page may require specific options to control the way users interact with the map to zoom and pan. These options, such as gestureHandling, minZoom, maxZoom and restriction, are defined within the MapOptions interface.

The following map demonstrates the default behavior for map interactions with a map instantiated with only the zoom and center options defined.

The code for this map is below.

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
});

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});

When a user scrolls a page that contains a map, the scrolling action can unintentionally cause the map to zoom. This behavior can be controlled using the gestureHandling map option.

The map below uses the gestureHandling option set to cooperative, allowing the user to scroll the page normally, without zooming or panning the map. Users can zoom the map by clicking the zoom controls. They can also zoom and pan by using two-finger movements on the map for touchscreen devices.

The code for this map is below.

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "cooperative",
});

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});

View Sample

The map at the top of the page without the gestureHandling option has the same behavior as the preceding map with gestureHandling set to cooperative because all of the maps on this page are within an <iframe>. The default gestureHandling value auto switches between greedy and cooperative based upon whether the map is contained within an <iframe>.

A map with gestureHandling set to greedy is below. This map reacts to all touch gestures and scroll events unlike cooperative.

The gestureHandling option can also be set to none to disable gestures on the map.

To entirely disable the ability to pan and zoom the map, two options, gestureHandling and zoomControl, must be included.

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});

The map below demonstrates the combination of gestureHandling and zoomControl in the code above.

It may be desireable to allow gestures and zoom controls but restrict the map to a particular bounds or a minimum and maximum zoom. To accomplish this you may set the restriction, minZoom, and maxZoom options. The following code and map demonstrate these options.

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-07-09 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-09 UTC."],[[["This documentation explains how to control user interactions, such as zoom and pan, on Google Maps using options like `gestureHandling`, `minZoom`, `maxZoom`, and `restriction`."],["The `gestureHandling` option allows you to manage how the map responds to scroll events and touch gestures, with options like `cooperative`, `greedy`, `auto`, and `none`."],["You can completely disable panning and zooming by setting `gestureHandling` to \"none\" and `zoomControl` to false."],["The `restriction`, `minZoom`, and `maxZoom` options can be used to limit the map's viewable area and zoom levels, providing further control over user interaction."]]],["This content explains how to control user interactions with Google Maps on a webpage. Key actions include using the `MapOptions` interface to define `gestureHandling`, `minZoom`, `maxZoom`, and `restriction`. `gestureHandling` controls how scrolling affects the map, with options like `cooperative`, `auto`, `greedy`, and `none`. To disable map panning and zooming, both `gestureHandling: \"none\"` and `zoomControl: false` must be set. Map boundaries and zoom levels can be restricted using `restriction`, `minZoom`, and `maxZoom` options.\n"]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4