استفاده از نقشه در یک صفحه وب ممکن است به گزینه های خاصی برای کنترل نحوه تعامل کاربران با نقشه برای بزرگنمایی و حرکت نیاز داشته باشد. این گزینه‌ها، مانند gestureHandling ، minZoom ، maxZoom و restriction ، در رابط MapOptions تعریف شده‌اند.
رفتار پیش فرض
نقشه زیر رفتار پیش‌فرض برای تعاملات نقشه با نقشه‌ای را نشان می‌دهد که تنها با گزینه‌های zoom و center تعریف شده است.
هنگامی که کاربر صفحه ای را که حاوی نقشه است پیمایش می کند، عمل پیمایش می تواند ناخواسته باعث بزرگنمایی نقشه شود. این رفتار را می توان با استفاده از گزینه gestureHandling map کنترل کرد.
ژست هندلینگ: cooperative
نقشه زیر از گزینه gestureHandling که روی cooperative تنظیم شده است، استفاده می کند، که به کاربر امکان می دهد صفحه را به طور معمول، بدون بزرگنمایی یا حرکت در نقشه حرکت کند. کاربران می توانند با کلیک روی کنترل های بزرگنمایی، نقشه را بزرگنمایی کنند. آنها همچنین می توانند با استفاده از حرکات دو انگشت روی نقشه برای دستگاه های صفحه لمسی بزرگنمایی و حرکت کنند.
نقشه بالای صفحه بدون گزینه gestureHandling رفتاری مشابه نقشه قبلی دارد که gestureHandling روی cooperative تنظیم شده است زیرا همه نقشه‌های این صفحه در یک <iframe> هستند. مقدار پیش‌فرض gestureHandling بر اساس اینکه آیا نقشه در یک <iframe> وجود دارد یا خیر، auto بین greedy و cooperative جابجا می‌شود.
نقشه موجود در <iframe>
رفتار
بله
cooperative
نه
greedy
ژست هندلینگ: greedy
نقشه ای با gestureHandling که روی greedy تنظیم شده است در زیر آمده است. این نقشه برخلاف cooperative به تمام حرکات لمسی و رویدادهای پیمایش واکنش نشان می دهد.
ژست هندلینگ: none
گزینه gestureHandling را نیز می توان برای غیرفعال کردن حرکات روی نقشه روی none تنظیم کرد.
غیرفعال کردن پان و زوم
برای غیرفعال کردن کامل قابلیت حرکت و بزرگنمایی نقشه، باید دو گزینه gestureHandling و zoomControl گنجانده شود.
ممکن است اجازه دادن به حرکات و کنترل‌های بزرگنمایی مطلوب باشد، اما نقشه را به یک محدوده خاص یا حداقل و حداکثر زوم محدود کنید. برای انجام این کار می توانید گزینه های محدودیت ، minZoom و maxZoom را تنظیم کنید. کد و نقشه زیر این گزینه ها را نشان می دهد.
تاریخ آخرین بهروزرسانی 2025-08-27 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-08-27 بهوقت ساعت هماهنگ جهانی."],[[["\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"]]
