একটি ওয়েব পৃষ্ঠায় একটি মানচিত্রের ব্যবহারের জন্য ব্যবহারকারীদের ম্যাপের সাথে জুম এবং প্যান করার উপায় নিয়ন্ত্রণ করার জন্য নির্দিষ্ট বিকল্পগুলির প্রয়োজন হতে পারে৷ এই বিকল্পগুলি, যেমন gestureHandling , minZoom , maxZoom এবং restriction , MapOptions ইন্টারফেসের মধ্যে সংজ্ঞায়িত করা হয়েছে৷
ডিফল্ট আচরণ
নিম্নলিখিত মানচিত্রটি শুধুমাত্র zoom এবং center বিকল্পগুলির সাথে সংজ্ঞায়িত একটি মানচিত্রের সাথে মানচিত্র ইন্টারঅ্যাকশনের জন্য ডিফল্ট আচরণ প্রদর্শন করে।
যখন একজন ব্যবহারকারী একটি মানচিত্র ধারণ করে এমন একটি পৃষ্ঠা স্ক্রোল করেন, তখন স্ক্রলিং ক্রিয়া অনিচ্ছাকৃতভাবে মানচিত্রটিকে জুম করতে পারে। এই আচরণটি অঙ্গভঙ্গি হ্যান্ডলিং মানচিত্র বিকল্প ব্যবহার করে নিয়ন্ত্রণ করা যেতে পারে।
gestureHandling: cooperative
নীচের মানচিত্রটি cooperative সেট করা অঙ্গভঙ্গি হ্যান্ডলিং বিকল্প ব্যবহার করে, যা ব্যবহারকারীকে মানচিত্রটি জুম বা প্যান না করেই সাধারণভাবে পৃষ্ঠাটি স্ক্রোল করতে দেয়৷ ব্যবহারকারীরা জুম নিয়ন্ত্রণে ক্লিক করে মানচিত্র জুম করতে পারেন। তারা টাচস্ক্রিন ডিভাইসের জন্য মানচিত্রে দুই আঙুলের নড়াচড়া ব্যবহার করে জুম এবং প্যান করতে পারে।
gestureHandling বিকল্প ব্যতীত পৃষ্ঠার শীর্ষে থাকা মানচিত্রটি অঙ্গভঙ্গিcooperative সহ পূর্ববর্তী মানচিত্রের মতো একই আচরণ করে কারণ এই পৃষ্ঠার সমস্ত মানচিত্র একটি <iframe> এর মধ্যে রয়েছে। মানচিত্রটি <iframe> এর মধ্যে রয়েছে কিনা তার উপর ভিত্তি করে ডিফল্ট অঙ্গভঙ্গি হ্যান্ডলিং মান greedy এবং cooperative মধ্যে auto স্যুইচ করে।
মানচিত্র <iframe> এর মধ্যে রয়েছে
আচরণ
হ্যাঁ
cooperative
না
greedy
gestureHandling: greedy
greedy সেট করা অঙ্গভঙ্গি হ্যান্ডলিং সহ একটি মানচিত্র নীচে রয়েছে৷ এই মানচিত্রটি cooperative বিপরীতে সমস্ত স্পর্শ অঙ্গভঙ্গি এবং স্ক্রোল ইভেন্টগুলিতে প্রতিক্রিয়া জানায়৷
অঙ্গভঙ্গি হ্যান্ডলিং: none
ম্যাপে অঙ্গভঙ্গি নিষ্ক্রিয় করার জন্য অঙ্গভঙ্গি হ্যান্ডলিং বিকল্পটি none সেট করা যেতে পারে।
প্যান এবং জুম অক্ষম করা হচ্ছে
মানচিত্রটিকে প্যান এবং জুম করার ক্ষমতা সম্পূর্ণরূপে অক্ষম করতে, দুটি বিকল্প, অঙ্গভঙ্গি হ্যান্ডলিং এবং জুমকন্ট্রোল অন্তর্ভুক্ত করতে হবে৷
অঙ্গভঙ্গি এবং জুম নিয়ন্ত্রণের অনুমতি দেওয়া আকাঙ্খিত হতে পারে তবে মানচিত্রটিকে একটি নির্দিষ্ট সীমানা বা সর্বনিম্ন এবং সর্বাধিক জুমের মধ্যে সীমাবদ্ধ করে। এটি সম্পন্ন করতে আপনি সীমাবদ্ধতা , minZoom , এবং maxZoom বিকল্পগুলি সেট করতে পারেন৷ নিম্নলিখিত কোড এবং মানচিত্র এই বিকল্পগুলি প্রদর্শন করে।
[[["সহজে বোঝা যায়","easyToUnderstand","thumb-up"],["আমার সমস্যার সমাধান হয়েছে","solvedMyProblem","thumb-up"],["অন্যান্য","otherUp","thumb-up"]],[["এতে আমার প্রয়োজনীয় তথ্য নেই","missingTheInformationINeed","thumb-down"],["খুব জটিল / অনেক ধাপ","tooComplicatedTooManySteps","thumb-down"],["পুরনো","outOfDate","thumb-down"],["অনুবাদ সংক্রান্ত সমস্যা","translationIssue","thumb-down"],["নমুনা / কোড সংক্রান্ত সমস্যা","samplesCodeIssue","thumb-down"],["অন্যান্য","otherDown","thumb-down"]],["2025-08-15 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"]]
