Việc sử dụng bản đồ trên một trang web có thể yêu cầu các lựa chọn cụ thể để kiểm soát cách người dùng tương tác với bản đồ để thu phóng và kéo. Các lựa chọn này (chẳng hạn như gestureHandling, minZoom, maxZoom và restriction) được xác định trong giao diện MapOptions.
Hành vi mặc định
Bản đồ sau đây minh hoạ hành vi mặc định cho các hoạt động tương tác với bản đồ khi bản đồ được khởi tạo chỉ với các lựa chọn zoom và center được xác định.
Khi người dùng cuộn một trang có chứa bản đồ, thao tác cuộn có thể vô tình khiến bản đồ thu phóng. Bạn có thể kiểm soát hành vi này bằng cách sử dụng lựa chọn gestureHandling trên bản đồ.
gestureHandling: cooperative
Bản đồ bên dưới sử dụng chế độ gestureHandling được đặt thành cooperative, cho phép người dùng cuộn trang bình thường mà không cần thu phóng hoặc di chuyển bản đồ. Người dùng có thể thu phóng bản đồ bằng cách nhấp vào các chế độ thu phóng. Họ cũng có thể thu phóng và di chuyển bằng cách dùng cử chỉ hai ngón tay trên bản đồ cho các thiết bị có màn hình cảm ứng.
Bản đồ ở đầu trang không có lựa chọn gestureHandling có cùng hành vi với bản đồ trước đó có gestureHandling được đặt thành cooperative vì tất cả bản đồ trên trang này đều nằm trong <iframe>. Giá trị gestureHandling mặc định auto chuyển đổi giữa greedy và cooperative dựa trên việc bản đồ có nằm trong <iframe> hay không.
Bản đồ nằm trong <iframe>
Hành vi
có
cooperative
không
greedy
gestureHandling: greedy
Bản đồ có gestureHandling được đặt thành greedy ở bên dưới. Không giống như cooperative, bản đồ này phản ứng với mọi cử chỉ chạm và sự kiện cuộn.
gestureHandling: none
Bạn cũng có thể đặt lựa chọn gestureHandling thành none để tắt cử chỉ trên bản đồ.
Tắt tính năng kéo và thu phóng
Để tắt hoàn toàn khả năng di chuyển và thu phóng bản đồ, bạn phải thêm 2 lựa chọn là gestureHandling và zoomControl.
Bạn có thể muốn cho phép cử chỉ và chế độ thu phóng nhưng hạn chế bản đồ trong một ranh giới cụ thể hoặc mức thu phóng tối thiểu và tối đa. Để thực hiện việc này, bạn có thể đặt các lựa chọn restriction, minZoom và maxZoom. Đoạn mã và bản đồ sau đây minh hoạ những lựa chọn này.
[null,null,["Cập nhật lần gần đây nhất: 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"]]
