Cuando se usa un mapa en una página web, a veces se requieren opciones específicas para controlar el modo en que los usuarios interactúan con el mapa a la hora de hacer zoom y desplazarse lateralmente. Estas opciones, como gestureHandling, minZoom, maxZoom y restriction, se definen dentro de la interfaz de MapOptions.
Comportamiento predeterminado
En el siguiente mapa, se muestra el comportamiento predeterminado para las interacciones con mapas en los que se crearon instancias solo con las opciones zoom y center.
Cuando un usuario se desplaza por una página que contiene un mapa, puede hacer zoom en este de manera no intencional. Este comportamiento se puede controlar con la opción de mapa gestureHandling.
gestureHandling: cooperative
En el siguiente mapa, se usa la opción gestureHandling configurada en cooperative para que el usuario se desplace por la página normalmente, sin hacer zoom ni desplazarse lateralmente por el mapa. Así, los usuarios pueden hacer clic en los controles de zoom si desean hacer zoom en el mapa. También pueden hacer zoom y desplazarse lateralmente con movimientos de dos dedos en los dispositivos con pantalla táctil.
El mapa que aparece en la parte superior de esta página, que no incluye la opción gestureHandling, tiene el mismo comportamiento que el mapa anterior, que presenta la opción gestureHandling establecida en cooperative, ya que todos los mapas de esta página cuentan con un <iframe>. El valor predeterminado de gestureHandlingauto alterna entre greedy y cooperative en función de si el mapa se contiene en un <iframe>.
Mapa contenido en <iframe>
Comportamiento
sí
cooperative
no
greedy
gestureHandling: greedy
A continuación, se muestra un mapa con gestureHandling establecido en greedy. Este mapa reacciona a todos los gestos táctiles y eventos de desplazamiento, a diferencia de cooperative.
gestureHandling: none
La opción gestureHandling también se puede establecer en none para inhabilitar los gestos en el mapa.
Cómo inhabilitar el desplazamiento lateral y el zoom
Para inhabilitar completamente las funciones de zoom y desplazamiento lateral en un mapa, se deben incluir dos opciones: gestureHandling y zoomControl.
En el siguiente mapa, se combinan gestureHandling y zoomControl, como se puede ver en el código anterior.
Cómo restringir los límites del mapa y el zoom
A veces es conveniente habilitar los controles de gestos y el zoom, y restringir el mapa a ciertos límites o a niveles de zoom máximos y mínimos. Para lograr esto, puedes configurar las opciones restriction, minZoom y maxZoom. Consulta el código y el mapa que aparecen a continuación para ver estas opciones.
[null,null,["Última actualización: 2025-08-27 (UTC)"],[[["\u003cp\u003eThis documentation explains how to control user interactions, such as zoom and pan, on Google Maps using options like \u003ccode\u003egestureHandling\u003c/code\u003e, \u003ccode\u003eminZoom\u003c/code\u003e, \u003ccode\u003emaxZoom\u003c/code\u003e, and \u003ccode\u003erestriction\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003egestureHandling\u003c/code\u003e option allows you to manage how the map responds to scroll events and touch gestures, with options like \u003ccode\u003ecooperative\u003c/code\u003e, \u003ccode\u003egreedy\u003c/code\u003e, \u003ccode\u003eauto\u003c/code\u003e, and \u003ccode\u003enone\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eYou can completely disable panning and zooming by setting \u003ccode\u003egestureHandling\u003c/code\u003e to "none" and \u003ccode\u003ezoomControl\u003c/code\u003e to false.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003erestriction\u003c/code\u003e, \u003ccode\u003eminZoom\u003c/code\u003e, and \u003ccode\u003emaxZoom\u003c/code\u003e options can be used to limit the map's viewable area and zoom levels, providing further control over user interaction.\u003c/p\u003e\n"]]],["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"],null,["# Controlling Zoom and Pan\n\nSelect platform: [Android](/maps/documentation/android-sdk/controls \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/controls \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/interaction \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nOverview\n--------\n\nThe 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](/maps/documentation/javascript/reference/map#MapOptions).\n\nDefault Behavior\n----------------\n\nThe following map demonstrates the default behavior for map interactions with a map instantiated with only the `zoom` and `center` options defined.\n\n\nThe code for this map is below.\n\n\n### TypeScript\n\n```typescript\nnew google.maps.Map(document.getElementById(\"map\")!, {\n zoom,\n center,\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/interaction-default/index.ts#L18-L21\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\n### JavaScript\n\n```javascript\nnew google.maps.Map(document.getElementById(\"map\"), {\n zoom,\n center,\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/interaction-default/docs/index.js#L17-L20\n```\n\n\u003cbr /\u003e\n\nControlling Gesture Handling\n----------------------------\n\nWhen a user scrolls a page that contains a map, the scrolling action can\nunintentionally cause the map to zoom. This behavior can be controlled using the\n[gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) map option.\n\n### gestureHandling: `cooperative`\n\nThe map below uses the [gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) option set\nto `cooperative`, allowing the user to scroll the page normally, without zooming\nor panning the map. Users can zoom the map by clicking the zoom controls. They\ncan also zoom and pan by using two-finger movements on the map for touchscreen\ndevices.\n\n\nThe code for this map is below.\n\n\n### TypeScript\n\n```typescript\nnew google.maps.Map(document.getElementById(\"map\")!, {\n zoom,\n center,\n gestureHandling: \"cooperative\",\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/interaction-cooperative/index.ts#L18-L22\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\n### JavaScript\n\n```javascript\nnew google.maps.Map(document.getElementById(\"map\"), {\n zoom,\n center,\n gestureHandling: \"cooperative\",\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/interaction-cooperative/docs/index.js#L17-L21\n```\n\n\u003cbr /\u003e\n\n[View Sample](/maps/documentation/javascript/examples/interaction-cooperative)\n\n### gestureHandling: `auto`\n\nThe map at the top of the page without the `gestureHandling` option has the same\nbehavior as the preceding map with [gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling)\nset to `cooperative` because all of the maps on this page are within an\n`\u003ciframe\u003e`. The default [gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) value\n`auto` switches between `greedy` and `cooperative` based upon whether the map is\ncontained within an `\u003ciframe\u003e`.\n\n| Map contained within `\u003ciframe\u003e` | Behavior |\n|---------------------------------|---------------|\n| yes | `cooperative` |\n| no | `greedy` |\n\n### gestureHandling: `greedy`\n\nA map with [gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) set to `greedy` is\nbelow. This map reacts to all touch gestures and scroll events unlike\n`cooperative`.\n\n\n### gestureHandling: `none`\n\nThe [gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) option can also be set to\n`none` to disable gestures on the map.\n| **Note:** The `gestureHandling` option does not apply to the Street View service.\n\nDisabling Pan and Zoom\n----------------------\n\nTo entirely disable the ability to pan and zoom the map, two options,\n[gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) and\n[zoomControl](/maps/documentation/javascript/reference/map#MapOptions.zoomControl), must be included.\n\n\n### TypeScript\n\n```typescript\nnew google.maps.Map(document.getElementById(\"map\")!, {\n zoom,\n center,\n gestureHandling: \"none\",\n zoomControl: false,\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/interaction-disable-pan-zoom/index.ts#L13-L18\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\n### JavaScript\n\n```javascript\nnew google.maps.Map(document.getElementById(\"map\"), {\n zoom,\n center,\n gestureHandling: \"none\",\n zoomControl: false,\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/interaction-disable-pan-zoom/docs/index.js#L12-L17\n```\n\n\u003cbr /\u003e\n\nThe map below demonstrates the combination of\n[gestureHandling](/maps/documentation/javascript/reference/map#MapOptions.gestureHandling) and\n[zoomControl](/maps/documentation/javascript/reference/map#MapOptions.zoomControl) in the code above.\n\n\nRestricting Map Bounds and Zoom\n-------------------------------\n\nIt may be desireable to allow gestures and zoom controls but restrict the map to\na particular bounds or a minimum and maximum zoom. To accomplish this you may\nset the [restriction](/maps/documentation/javascript/reference/map#MapOptions.restriction), [minZoom](/maps/documentation/javascript/reference/map#MapOptions.minZoom),\nand [maxZoom](/maps/documentation/javascript/reference/map#MapOptions.maxZoom) options. The following code and map\ndemonstrate these options.\n\n\n### TypeScript\n\n```typescript\nnew google.maps.Map(document.getElementById(\"map\")!, {\n zoom,\n center,\n minZoom: zoom - 3,\n maxZoom: zoom + 3,\n restriction: {\n latLngBounds: {\n north: -10,\n south: -40,\n east: 160,\n west: 100,\n },\n },\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/interaction-restricted/index.ts#L13-L26\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\n### JavaScript\n\n```javascript\nnew google.maps.Map(document.getElementById(\"map\"), {\n zoom,\n center,\n minZoom: zoom - 3,\n maxZoom: zoom + 3,\n restriction: {\n latLngBounds: {\n north: -10,\n south: -40,\n east: 160,\n west: 100,\n },\n },\n});https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/interaction-restricted/docs/index.js#L12-L25\n```\n\n\u003cbr /\u003e"]]
