reviewsהשקת Places UI Kit: ספריית רכיבים מוכנה לשימוש בעלות נמוכה, שמאפשרת לכם להוסיף לכל מפה שתבחרו את ממשק המשתמש המוכר של 'מקומות' במפות Google. כדאי לנסות אותו ולשלוח לנו משוב כדי לעזור לנו לעצב את העתיד של GMP.
שימוש במפה בדף אינטרנט עשוי לדרוש אפשרויות ספציפיות כדי לשלוט באופן שבו המשתמשים מבצעים אינטראקציה עם המפה, למשל כדי להתקרב או להתרחק ממנה או להזיז אותה. האפשרויות האלה, כמו gestureHandling, minZoom, maxZoom ו-restriction, מוגדרות בתוך הממשק MapOptions.
התנהגות ברירת המחדל
במפה הבאה מוצגת התנהגות ברירת המחדל של אינטראקציות עם מפה שנוצרה עם האפשרויות zoom ו-center בלבד.
כשמשתמש גולל דף שמכיל מפה, פעולת הגלילה יכולה לגרום בטעות לשינוי מרחק התצוגה במפה. אפשר לשלוט בהתנהגות הזו באמצעות אפשרות המפה gestureHandling.
gestureHandling: cooperative
במפה שלמטה נעשה שימוש באפשרות gestureHandling שהוגדרה לערך cooperative, כך שהמשתמש יכול לגלול בדף כרגיל, בלי להגדיל או להקטין את התצוגה של המפה או להזיז אותה. המשתמשים יכולים לשנות את המרחק מהתצוגה במפה באמצעות לחצני הזום. במכשירי מסך מגע, הם יכולים גם לשנות את המרחק מהתצוגה ולהזיז את המפה באמצעות תנועות של שתי אצבעות.
המפה בחלק העליון של הדף ללא האפשרות gestureHandling מתנהגת כמו המפה הקודמת עם gestureHandling שמוגדר ל-cooperative, כי כל המפות בדף הזה נמצאות בתוך <iframe>. ערך ברירת המחדל של gestureHandling, auto, משתנה בין greedy ל-cooperative בהתאם לשאלה אם המפה מוכלת ב-<iframe>.
מפה שמופיעה בתוך <iframe>
התנהגות
כן
cooperative
לא
greedy
gestureHandling: greedy
מפה עם gestureHandling שמוגדר ל-greedy מוצגת למטה. המפה הזו מגיבה לכל מחוות המגע ולאירועי הגלילה, בניגוד ל-cooperative.
gestureHandling: none
אפשר גם להגדיר את האפשרות gestureHandling לערך none כדי להשבית את השימוש במחוות במפה.
השבתה של הזזה וזום
כדי להשבית לגמרי את האפשרות להזיז את המפה ולשנות את מרחק התצוגה, צריך לכלול שתי אפשרויות: gestureHandling ו-zoomControl.
יכול להיות שתרצו לאפשר שימוש במחוות ובאמצעי בקרה של זום, אבל להגביל את המפה לגבולות מסוימים או לזום מינימלי ומקסימלי. כדי לעשות את זה, אפשר להגדיר את האפשרויות restriction, minZoom ו-maxZoom. הקוד והמפה הבאים ממחישים את האפשרויות האלה.
[null,null,["עדכון אחרון: 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"]]
