এক নজরে
কোনও ওয়েব পৃষ্ঠায় ম্যাপ ব্যবহার করার জন্য নির্দিষ্ট বিকল্পের প্রয়োজন হতে পারে, যাতে ব্যবহারকারী ম্যাপ জুম ও প্যান করার সময় ইন্টার্যাক্ট করার পদ্ধতি নিয়ন্ত্রণ করতে পারেন। gestureHandling, minZoom, maxZoom ও restriction-এর মতো এইসব বিকল্প MapOptions ইন্টারফেসের মধ্যে সংজ্ঞায়িত করা হয়।
ডিফল্ট আচরণ
নিচের ম্যাপটি শুধুমাত্র zoom ও center বিকল্পের মাধ্যমে ইনস্ট্যানশিয়েট করা ম্যাপের সাথে ইন্টার্যাকশনের ডিফল্ট আচরণ দেখায়।
এই ম্যাপের কোড নিচে দেওয়া হল।
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, });
জাভাস্ক্রিপ্ট
new google.maps.Map(document.getElementById("map"), { zoom, center, });
জেসচার হ্যান্ডলিং কন্ট্রোল করা
কোনও ব্যবহারকারী ম্যাপ থাকা পৃষ্ঠা স্ক্রল করলে, স্ক্রল করার অ্যাকশন অনিচ্ছাকৃতভাবে ম্যাপ জুম করতে পারে। gestureHandling ম্যাপ বিকল্প ব্যবহার করে এই আচরণ নিয়ন্ত্রণ করা যেতে পারে।
gestureHandling: cooperative
নিচের ম্যাপে gestureHandling বিকল্পটি সেট করা আছে
যা cooperative, এর ফলে ব্যবহারকারী ম্যাপ জুম
বা প্যান না করেই পৃষ্ঠাটি স্বাভাবিকভাবে স্ক্রল করতে পারবেন। ব্যবহারকারীরা জুম কন্ট্রোলে ক্লিক করে ম্যাপ জুম করতে পারবেন। এছাড়াও, টাচস্ক্রিন
ডিভাইসে ম্যাপে দুটি আঙুল দিয়ে জুম ও প্যান করা যায়।
এই ম্যাপের কোড নিচে দেওয়া হল।
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, gestureHandling: "cooperative", });
জাভাস্ক্রিপ্ট
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "cooperative", });
gestureHandling: auto
gestureHandling বিকল্প ছাড়া পৃষ্ঠার সবচেয়ে উপরে থাকা ম্যাপের আচরণ
আগের ম্যাপের মতোই, কারণ এই পৃষ্ঠার সব ম্যাপই
<iframe>-এর মধ্যে আছে এবং gestureHandling
cooperative হিসেবে সেট করা আছে। ডিফল্ট gestureHandling ভ্যালু
auto, greedy এবং cooperative-এর মধ্যে পরিবর্তন করে, ম্যাপটি <iframe>-এর মধ্যে আছে কিনা তার উপর ভিত্তি করে।
<iframe>-এর মধ্যে থাকা ম্যাপ |
আচরণ |
|---|---|
| হ্যাঁ | cooperative |
| না | greedy |
gestureHandling: greedy
greedy-এ সেট করা gestureHandling সহ ম্যাপ
নিচে দেওয়া হল। এই ম্যাপটি
cooperative-এর মতো নয়, এটি সব টাচ জেসচার ও স্ক্রল ইভেন্টে প্রতিক্রিয়া জানায়।
gestureHandling: none
এছাড়াও, ম্যাপে জেসচার বন্ধ করতে gestureHandling বিকল্পটি
none হিসেবে সেট করা যেতে পারে।
প্যান ও জুম বন্ধ করা হচ্ছে
ম্যাপ প্যান ও জুম করার সুবিধা সম্পূর্ণভাবে বন্ধ করতে, দুটি বিকল্প, gestureHandling এবং zoomControl, অবশ্যই অন্তর্ভুক্ত করতে হবে।
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, gestureHandling: "none", zoomControl: false, });
জাভাস্ক্রিপ্ট
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
নিচের ম্যাপে উপরের কোডে gestureHandling ও zoomControl-এর কম্বিনেশন দেখানো হয়েছে।
ম্যাপ বাউন্ড ও জুম সীমাবদ্ধ করা
জেসচার ও জুম কন্ট্রোল করার অনুমতি দেওয়া বাঞ্ছনীয় হতে পারে, তবে ম্যাপকে নির্দিষ্ট সীমানা বা ন্যূনতম ও সর্বাধিক জুমের মধ্যে সীমাবদ্ধ রাখতে হবে। এটি করতে, আপনি বিধিনিষেধ, minZoom, এবং maxZoom বিকল্প সেট করতে পারেন। নিচে দেওয়া কোড ও ম্যাপ এইসব বিকল্পের ব্যাপারে ব্যাখ্যা করে।
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, minZoom: zoom - 3, maxZoom: zoom + 3, restriction: { latLngBounds: { north: -10, south: -40, east: 160, west: 100, }, }, });
জাভাস্ক্রিপ্ট
new google.maps.Map(document.getElementById("map"), { zoom, center, minZoom: zoom - 3, maxZoom: zoom + 3, restriction: { latLngBounds: { north: -10, south: -40, east: 160, west: 100, }, }, });