কন্ট্রোল

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

এক নজরে কন্ট্রোল

Maps JavaScript API-এর মাধ্যমে দেখানো ম্যাপে UI এলিমেন্ট থাকে যার মাধ্যমে ব্যবহারকারী ম্যাপের সাথে ইন্টার‍্যাক্ট করতে পারেন। এইসব এলিমেন্টকে কন্ট্রোল বলা হয় এবং আপনি নিজের অ্যাপ্লিকেশনে এইসব কন্ট্রোলের বিভিন্ন ভার্সন যোগ করতে পারবেন। বিকল্প হিসেবে, আপনি কিছু না করে Maps JavaScript API-কে সব কন্ট্রোল আচরণ ম্যানেজ করতে দিতে পারেন।

Maps JavaScript API-এর মাধ্যমে দেখানো কন্ট্রোলের ডিফল্ট সেট নিম্নলিখিত ম্যাপে দেখানো হয়েছে:

উপরের বাঁদিক থেকে ঘড়ির কাঁটার দিকে: ম্যাপের ধরন, ফুল-স্ক্রিন, ক্যামেরা, Street View, কীবোর্ড শর্টকাট।

আপনার ম্যাপে ব্যবহার করতে পারবেন এমন কন্ট্রোলের সম্পূর্ণ সেটের তালিকা নিচে দেওয়া হল:

• ম্যাপের ধরন কন্ট্রোল ড্রপ-ডাউন বা অনুভূমিক বোতাম বার স্টাইলে উপলভ্য, যা ব্যবহারকারীকে ম্যাপের ধরন (ROADMAP, SATELLITE, HYBRID, বা TERRAIN) বেছে নিতে দেয়। এই কন্ট্রোল ডিফল্ট হিসেবে ম্যাপের উপরে বাঁদিকের কোণে দেখা যায়।
• ফুল-স্ক্রিন কন্ট্রোল ম্যাপ ফুল-স্ক্রিন মোডে খোলার বিকল্প অফার করে। ডেস্কটপ ও মোবাইল ডিভাইসে এই কন্ট্রোল ডিফল্ট হিসেবে চালু করা থাকে। মনে রাখবেন: iOS-এ ফুল-স্ক্রিন ফিচার কাজ করে না। তাই iOS ডিভাইসে ফুল-স্ক্রিন কন্ট্রোল দেখা যায় না।
• ক্যামেরা কন্ট্রোল ফিচারে জুম ও প্যান কন্ট্রোল, দুটিই আছে।
• Street View কন্ট্রোল-এ একটি পেগম্যান আইকন থাকে যা Street View চালু করার জন্য ম্যাপে টেনে আনা যেতে পারে। এই কন্ট্রোল ডিফল্ট হিসেবে ম্যাপের নিচের দিকে ডানদিকে দেখা যায়।
• ঘোরানোর কন্ট্রোল 3D ছবি সহ ম্যাপের জন্য কাত করা এবং ঘোরানোর বিকল্পের একটি কম্বিনেশন প্রদান করে। এই কন্ট্রোল ডিফল্ট হিসেবে ম্যাপের নিচের দিকে ডানদিকে দেখা যায়। আরও তথ্যের জন্য 3D ওভারভিউ দেখুন।
• স্কেল কন্ট্রোল ম্যাপ স্কেল এলিমেন্ট দেখায়। এই কন্ট্রোল সাধারণত বন্ধ থাকে।
• কীবোর্ড শর্টকাট কন্ট্রোল ম্যাপের সাথে ইন্টার‍্যাক্ট করার জন্য কীবোর্ড শর্টকাটের একটি তালিকা দেখায়।

আপনি সরাসরি এইসব ম্যাপ কন্ট্রোল অ্যাক্সেস বা পরিবর্তন করতে পারবেন না। পরিবর্তে, আপনি ম্যাপের MapOptions ফিল্ড পরিবর্তন করেন যা কন্ট্রোলের দৃশ্যমানতা ও প্রেজেন্টেশনকে প্রভাবিত করে। আপনি ম্যাপ ইনস্ট্যান্টিয়েট করার সময় (উপযুক্ত MapOptions সহ) কন্ট্রোল প্রেজেন্টেশন অ্যাডজাস্ট করতে পারেন অথবা ম্যাপের বিকল্প পরিবর্তন করতে setOptions() কল করে ডায়নামিক্যালি ম্যাপ পরিবর্তন করতে পারেন।

এইসব কন্ট্রোলের সবকটি ডিফল্ট হিসেবে চালু করা থাকে না। ডিফল্ট UI-এর আচরণ (এবং কীভাবে এই ধরনের আচরণ পরিবর্তন করতে হয়) সম্পর্কে জানতে, নিচে ডিফল্ট UI দেখুন।

ডিফল্ট UI

ডিফল্ট হিসেবে, ম্যাপ খুব ছোট (২০০x২০০ পিক্সেল) হলে সব কন্ট্রোল অদৃশ্য হয়ে যায়। আপনি কন্ট্রোল দৃশ্যমান করার জন্য স্পষ্টভাবে সেট করে এই আচরণ ওভাররাইড করতে পারেন। ম্যাপে কন্ট্রোল যোগ করা দেখুন।

ফুলস্ক্রিন কন্ট্রোল ছাড়া (কন্ট্রোলের তালিকায় বর্ণনা করা আচরণ দেখুন) মোবাইল ও ডেস্কটপ ডিভাইসে কন্ট্রোলের আচরণ ও চেহারা একই রকম।

এছাড়াও, সব ডিভাইসে ডিফল্ট হিসেবে কীবোর্ড হ্যান্ডলিং চালু থাকে।

ডিফল্ট UI বন্ধ করুন

আপনি API-এর ডিফল্ট UI বোতাম সম্পূর্ণভাবে বন্ধ করতে চাইতে পারেন। এটি করতে, ম্যাপের disableDefaultUI প্রপার্টি (MapOptions অবজেক্টের মধ্যে) true-এ সেট করুন। এই প্রপার্টি Maps JavaScript API থেকে যেকোনও UI কন্ট্রোল বোতাম বন্ধ করে দেয়। তবে, এটি বেস ম্যাপে মাউস জেসচার বা কীবোর্ড শর্টকাটকে প্রভাবিত করে না, যা যথাক্রমে gestureHandling এবং keyboardShortcuts প্রপার্টি দ্বারা নিয়ন্ত্রিত হয়।

নিম্নলিখিত কোড UI বোতাম বন্ধ করে দেয়:

TypeScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

জাভাস্ক্রিপ্ট

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.js

উদাহরণ দেখুন

ম্যাপে কন্ট্রোল যোগ করা

আপনি UI আচরণ বা কন্ট্রোল সরিয়ে, যোগ করে বা পরিবর্তন করে আপনার ইন্টারফেস কাস্টমাইজ করতে চাইতে পারেন এবং নিশ্চিত করতে পারেন যে ভবিষ্যতের আপডেটগুলি এই আচরণ পরিবর্তন করবে না। আপনি যদি শুধুমাত্র আগে থেকে থাকা আচরণ যোগ বা পরিবর্তন করতে চান, তাহলে আপনাকে নিশ্চিত করতে হবে যে কন্ট্রোলটি আপনার অ্যাপ্লিকেশনে স্পষ্টভাবে যোগ করা হয়েছে।

ম্যাপে ডিফল্ট হিসেবে কিছু কন্ট্রোল দেখানো হয়, তবে আপনি নির্দিষ্টভাবে অনুরোধ না করলে অন্যান্য কন্ট্রোল দেখানো হয় না। ম্যাপ থেকে কন্ট্রোল যোগ করা বা সরানো নিম্নলিখিত MapOptions অবজেক্টের ফিল্ডে উল্লেখ করা আছে, যা আপনি true-এ সেট করে সেগুলি দেখতে পারেন বা false-এ সেট করে সেগুলি লুকাতে পারেন:

{
  cameraControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

ডিফল্ট হিসেবে, ম্যাপের সাইজ ২০০x২০০ পিক্সেলের থেকে ছোট হলে সব কন্ট্রোল অদৃশ্য হয়ে যায়। আপনি কন্ট্রোল দৃশ্যমান করার জন্য স্পষ্টভাবে সেট করে এই আচরণ ওভাররাইড করতে পারেন। যেমন, ম্যাপের সাইজ এবং cameraControl ফিল্ডের সেটিংয়ের উপর ভিত্তি করে, ক্যামেরা কন্ট্রোল দেখা যাবে কিনা তা নিম্নলিখিত সারণীতে দেখানো হয়েছে:

মানচিত্রের আকার	cameraControl	দেখা যাচ্ছে?
যেকোনও	false	না
যেকোনও	true	হ্যাঁ
>= ২০০x২০০ পিক্সেল	undefined	হ্যাঁ
< ২০০x২০০ পিক্সেল	undefined	না

নিম্নলিখিত উদাহরণে ম্যাপে ক্যামেরা কন্ট্রোল লুকানো এবং স্কেল কন্ট্রোল দেখানোর জন্য সেট করা হয়েছে। মনে রাখবেন যে আমরা ডিফল্ট UI স্পষ্টভাবে বন্ধ করি না, তাই এইসব পরিবর্তন ডিফল্ট UI-এর আচরণে যোগ করা হয়।

TypeScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

জাভাস্ক্রিপ্ট

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.js

উদাহরণ দেখুন

কন্ট্রোল করার বিকল্প

বেশ কিছু কন্ট্রোল কনফিগার করা যায়, যার ফলে আপনি সেগুলির আচরণ বা চেহারা পরিবর্তন করতে পারবেন। যেমন, ম্যাপ টাইপ কন্ট্রোল অনুভূমিক বার বা ড্রপ-ডাউন মেনু হিসেবে দেখা যেতে পারে।

ম্যাপ তৈরি করার সময় MapOptions অবজেক্টের মধ্যে উপযুক্ত কন্ট্রোল বিকল্প ফিল্ড পরিবর্তন করে এইসব কন্ট্রোল পরিবর্তন করা হয়।

যেমন, ম্যাপের ধরন সংক্রান্ত কন্ট্রোল পরিবর্তন করার বিকল্প mapTypeControlOptions ফিল্ডে দেখানো হয়। ম্যাপ টাইপ কন্ট্রোল নিম্নলিখিত style বিকল্পগুলির মধ্যে একটিতে দেখা যেতে পারে:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR, Google Maps-এ যেমন দেখানো হয়, ঠিক তেমনভাবে অনুভূমিক বারে বোতাম হিসেবে কন্ট্রোলের অ্যারে দেখায়।
• google.maps.MapTypeControlStyle.DROPDOWN_MENU একটি সিঙ্গেল বোতাম কন্ট্রোল দেখায় যা আপনাকে ড্রপ-ডাউন মেনু ব্যবহার করে ম্যাপের ধরন বেছে নিতে অনুমতি দেয়।
• google.maps.MapTypeControlStyle.DEFAULT ডিফল্ট অ্যাকশন দেখায়, যা স্ক্রিনের সাইজের উপর নির্ভর করে এবং API-এর ভবিষ্যতের ভার্সনে পরিবর্তন হতে পারে।

মনে রাখবেন, আপনি কোনও কন্ট্রোল বিকল্প পরিবর্তন করলে, আপনাকে স্পষ্টভাবে কন্ট্রোলও চালু করতে হবে, এর জন্য উপযুক্ত MapOptions ভ্যালু true-এ সেট করতে হবে। যেমন, DROPDOWN_MENU স্টাইল দেখানোর জন্য ম্যাপ টাইপ কন্ট্রোল সেট করতে, MapOptions অবজেক্টের মধ্যে নিম্নলিখিত কোড ব্যবহার করুন:

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে কীভাবে কন্ট্রোলের ডিফল্ট পজিশন ও স্টাইল পরিবর্তন করতে হয়।

TypeScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [MapTypeId.ROADMAP, MapTypeId.TERRAIN],
        position: ControlPosition.TOP_CENTER,
    },
});
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

জাভাস্ক্রিপ্ট

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [MapTypeId.ROADMAP, MapTypeId.TERRAIN],
        position: ControlPosition.TOP_CENTER,
    },
});
index.js

উদাহরণ দেখুন

ম্যাপ তৈরি করার সময় সাধারণত কন্ট্রোল কনফিগার করা হয়। তবে, আপনি Map-এর setOptions() মেথড কল করে এবং নতুন কন্ট্রোল বিকল্প পাস করে কন্ট্রোলের প্রেজেন্টেশন ডাইনামিক্যালি পরিবর্তন করতে পারেন।

কন্ট্রোল পরিবর্তন করুন

আপনি ম্যাপ তৈরি করার সময় ম্যাপের MapOptions অবজেক্টের মধ্যে ফিল্ডের মাধ্যমে কন্ট্রোলের প্রেজেন্টেশন নির্দিষ্ট করেন। এইসব ফিল্ড নিচে উল্লেখ করা হল:

• cameraControl ক্যামেরা কন্ট্রোল চালু/বন্ধ করে, যা ব্যবহারকারীকে ম্যাপ জুম ও প্যান করতে দেয়। এই কন্ট্রোল ডিফল্ট হিসেবে সব ম্যাপে দেখা যায়। cameraControlOptions ফিল্ডটি অতিরিক্তভাবে এই কন্ট্রোলের জন্য ব্যবহার করার জন্য CameraControlOptions নির্দিষ্ট করে।
• mapTypeControl ম্যাপ টাইপ কন্ট্রোল চালু/বন্ধ করে যা ব্যবহারকারীকে ম্যাপ টাইপের (যেমন ম্যাপ এবং স্যাটেলাইট) মধ্যে টগল করতে দেয়। ডিফল্ট হিসেবে, এই কন্ট্রোলটি ম্যাপের উপরে বাঁদিকের কোণে দেখা যায়। mapTypeControlOptions ফিল্ড এই কন্ট্রোলের জন্য ব্যবহার করতে অতিরিক্তভাবে MapTypeControlOptions উল্লেখ করে।
• streetViewControl পেগম্যান কন্ট্রোল চালু/বন্ধ করে যা ব্যবহারকারীকে Street View প্যানোরামা চালু করতে দেয়। ডিফল্ট হিসেবে, এই কন্ট্রোলটি দৃশ্যমান এবং ম্যাপের নিচের দিকে ডানদিকে দেখা যায়। streetViewControlOptions ফিল্ড এই কন্ট্রোলের জন্য ব্যবহার করতে অতিরিক্তভাবে StreetViewControlOptions উল্লেখ করে।
• rotateControl 3D ছবির ওরিয়েন্টেশন কন্ট্রোল করার জন্য 'ঘোরান' কন্ট্রোলের উপস্থিতি চালু/বন্ধ করে। ডিফল্ট হিসেবে, বর্তমান জুম ও লোকেশনে প্রদত্ত ম্যাপের ধরনের জন্য 3D ইমেজারি আছে কি নেই তার উপর ভিত্তি করে কন্ট্রোলের উপস্থিতি নির্ধারণ করা হয়। আপনি ম্যাপের rotateControlOptions সেট করে কন্ট্রোলের আচরণ পরিবর্তন করতে পারেন যাতে RotateControlOptions ব্যবহার করার জন্য নির্দিষ্ট করা যায়। কন্ট্রোলটি শুধুমাত্র 3D বেস ম্যাপে দেখা যাবে।
• scaleControl স্কেল কন্ট্রোল চালু/বন্ধ করে যা ম্যাপ স্কেল প্রদান করে। ডিফল্ট হিসেবে, এই কন্ট্রোল দেখা যায় না। চালু করা থাকলে, এটি সবসময় ম্যাপের নিচে ডানদিকের কোণে দেখা যাবে। এই কন্ট্রোলের জন্য ব্যবহার করতে scaleControlOptions অতিরিক্তভাবে ScaleControlOptions নির্দিষ্ট করে।
• fullscreenControl ফুলস্ক্রিন মোডে ম্যাপ খোলার কন্ট্রোল চালু/বন্ধ করে। সাধারণত, ডেস্কটপ ও Android ডিভাইসে এই কন্ট্রোল ডিফল্ট হিসেবে চালু থাকে। চালু করা হলে, ম্যাপের উপরে ডানদিকে কন্ট্রোল দেখা যায়। এই কন্ট্রোলের জন্য ব্যবহার করতে fullscreenControlOptions অতিরিক্তভাবে FullscreenControlOptions নির্দিষ্ট করে।

মনে রাখবেন, আপনি প্রাথমিকভাবে বন্ধ করে দেওয়া কন্ট্রোলের জন্য বিকল্প নির্দিষ্ট করতে পারেন।

কন্ট্রোল পজিশনিং

অধিকাংশ কন্ট্রোল বিকল্পে একটি position প্রপার্টি থাকে (ControlPosition ধরনের) যা ম্যাপের কোথায় কন্ট্রোলটি প্লেস করতে হবে তা নির্দেশ করে। এইসব কন্ট্রোলের পজিশনিং অ্যাবসোলিউট নয়। পরিবর্তে, API, ম্যাপের বর্তমান এলিমেন্ট বা অন্যান্য কন্ট্রোলের চারপাশে, নির্দিষ্ট সীমাবদ্ধতার (যেমন ম্যাপের সাইজ) মধ্যে, কন্ট্রোলগুলিকে বুদ্ধিমত্তার সাথে সাজিয়ে দেবে।

কন্ট্রোল পজিশন দুই ধরনের হয়: লিগেসি ও লজিক্যাল। বাঁদিক-থেকে-ডানদিক (LTR) এবং ডানদিক-থেকে-বাঁদিক (RTL) লেআউট প্রসঙ্গ অটোমেটিক সাপোর্ট করার জন্য লজিক্যাল ভ্যালু ব্যবহার করার সাজেশন দেওয়া হয়। রেফারেন্স গাইড দেখুন।

নিম্নলিখিত সারণীতে LTR ও RTL প্রসঙ্গে কাজ করে এমন কন্ট্রোল পজিশন দেখানো হয়েছে।

LTR পজিশন

Position (LTR Context)	লজিক্যাল কনস্ট্যান্ট (সাজেস্ট করা হয়েছে)	লিগ্যাসি কনস্ট্যান্ট
সবচেয়ে উপরে বাঁদিকে	BLOCK_START_INLINE_START	TOP_LEFT
উপরে মাঝখানে	BLOCK_START_INLINE_CENTER	TOP_CENTER
সবচেয়ে উপরে ডানদিকে	BLOCK_START_INLINE_END	TOP_RIGHT
বাঁদিকে উপরে	INLINE_START_BLOCK_START	LEFT_TOP
বাঁদিকের কেন্দ্র	INLINE_START_BLOCK_CENTER	LEFT_CENTER
বাঁদিকে নিচে	INLINE_START_BLOCK_END	LEFT_BOTTOM
ডানদিকে উপরে	INLINE_END_BLOCK_START	RIGHT_TOP
ডানদিকের কেন্দ্র	INLINE_END_BLOCK_CENTER	RIGHT_CENTER
ডানদিকে নিচে	INLINE_END_BLOCK_END	RIGHT_BOTTOM
নিচে বাঁদিকে	BLOCK_END_INLINE_START	BOTTOM_LEFT
নিচে মাঝখানে	BLOCK_END_INLINE_CENTER	BOTTOM_CENTER
নিচে ডানদিকে	BLOCK_END_INLINE_END	BOTTOM_RIGHT

RTL পজিশন

পজিশন (RTL কনটেক্সট)	লজিক্যাল কনস্ট্যান্ট (সাজেস্ট করা হয়েছে)	লিগ্যাসি কনস্ট্যান্ট
সবচেয়ে উপরে ডানদিকে	BLOCK_START_INLINE_START	TOP_RIGHT
উপরে মাঝখানে	BLOCK_START_INLINE_CENTER	TOP_CENTER
সবচেয়ে উপরে বাঁদিকে	BLOCK_START_INLINE_END	TOP_LEFT
ডানদিকে উপরে	INLINE_START_BLOCK_START	RIGHT_TOP
ডানদিকের কেন্দ্র	INLINE_START_BLOCK_CENTER	RIGHT_CENTER
ডানদিকে নিচে	INLINE_START_BLOCK_END	RIGHT_BOTTOM
বাঁদিকে উপরে	INLINE_END_BLOCK_START	LEFT_TOP
বাঁদিকের কেন্দ্র	INLINE_END_BLOCK_CENTER	LEFT_CENTER
বাঁদিকে নিচে	INLINE_END_BLOCK_END	LEFT_BOTTOM
নিচে ডানদিকে	BLOCK_END_INLINE_START	BOTTOM_RIGHT
নিচে মাঝখানে	BLOCK_END_INLINE_CENTER	BOTTOM_CENTER
নিচে বাঁদিকে	BLOCK_END_INLINE_END	BOTTOM_LEFT

LTR ও RTL মোডের মধ্যে ম্যাপ টগল করতে লেবেলে ক্লিক করুন।

মনে রাখবেন যে এই পজিশনগুলি UI এলিমেন্টের পজিশনের সাথে মিলে যেতে পারে যার প্লেসমেন্ট আপনি হয়ত পরিবর্তন করতে পারবেন না (যেমন কপিরাইট এবং Google লোগো)। সেক্ষেত্রে, প্রতিটি পজিশনের জন্য উল্লেখ করা লজিক অনুযায়ী কন্ট্রোলগুলি ফ্লো করবে এবং তাদের নির্দেশিত পজিশনের যতটা সম্ভব কাছাকাছি দেখানো হবে। জটিল লেআউটের ক্ষেত্রে কন্ট্রোলগুলি ওভারল্যাপ করবে না এমন কোনও গ্যারান্টি দেওয়া যায় না, যদিও API সেগুলিকে বুদ্ধিমত্তার সাথে সাজানোর চেষ্টা করবে।

নিম্নলিখিত উদাহরণে বিভিন্ন পজিশনে সব কন্ট্রোল চালু করা সহ একটি বেসিক ম্যাপ দেখানো হয়েছে।

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Request needed libraries.
    const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: MapTypeControlStyle.HORIZONTAL_BAR,
            position: ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}

void init();
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

জাভাস্ক্রিপ্ট

const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: MapTypeControlStyle.HORIZONTAL_BAR,
            position: ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}

void init();
index.js

উদাহরণ দেখুন

কাস্টম কন্ট্রোল

আগে থেকে থাকা API কন্ট্রোলের স্টাইল ও পজিশন পরিবর্তন করার পাশাপাশি, ব্যবহারকারীর সাথে ইন্টার‍্যাকশন ম্যানেজ করার জন্য আপনি নিজস্ব কন্ট্রোল তৈরি করতে পারবেন। কন্ট্রোল হল স্থির উইজেট যা ম্যাপের উপরে নির্দিষ্ট পজিশনে ভেসে থাকে, ওভারলে-এর মতো নয়, যা ম্যাপের সাথে সাথে সরে যায়। আরও মৌলিকভাবে, একটি নিয়ন্ত্রণ হল একটি <div> উপাদান যা ম্যাপে একটি পরম অবস্থান আছে, ব্যবহারকারীকে কিছু UI প্রদর্শন করে এবং ব্যবহারকারী বা ম্যাপের সাথে ইন্টারঅ্যাকশন পরিচালনা করে, সাধারণত একটি ইভেন্টের মাধ্যমে হ্যান্ডলার

আপনার নিজস্ব কাস্টম কন্ট্রোল তৈরি করতে, কিছু নিয়ম মেনে চলা প্রয়োজন। তবে, নিম্নলিখিত নির্দেশিকাগুলি পেশাদার পদ্ধতি হিসেবে কাজ করতে পারে:

• কন্ট্রোল এলিমেন্ট দেখানোর জন্য উপযুক্ত CSS নির্ধারণ করুন।
• ম্যাপ প্রপার্টি পরিবর্তন বা ব্যবহারকারীর ইভেন্টের (যেমন, 'click' ইভেন্ট) জন্য ইভেন্ট হ্যান্ডলারের মাধ্যমে ব্যবহারকারী বা ম্যাপের সাথে ইন্টার‍্যাকশন ম্যানেজ করুন।
• কন্ট্রোল ধরে রাখতে একটি <div> এলিমেন্ট তৈরি করুন এবং এই এলিমেন্টটি Map-এর controls প্রপার্টিতে যোগ করুন।

এইসব উদ্বেগের প্রতিটি নিচে আলোচনা করা হয়েছে।

কাস্টম কন্ট্রোল আঁকা

আপনি কীভাবে আপনার কন্ট্রোল আঁকবেন তা আপনার উপর নির্ভর করে। সাধারণত, আমরা সাজেস্ট করি যে আপনি আপনার কন্ট্রোল প্রেজেন্টেশন একটিমাত্র <div> এলিমেন্টের মধ্যে রাখুন যাতে আপনি নিজের কন্ট্রোলকে একটি ইউনিট হিসেবে ব্যবহার করতে পারেন। নিচে দেখানো স্যাম্পেলে আমরা এই ডিজাইন প্যাটার্ন ব্যবহার করব।

আকর্ষণীয় কন্ট্রোল ডিজাইন করার জন্য CSS এবং DOM স্ট্রাকচার সম্পর্কে কিছুটা জ্ঞান থাকা প্রয়োজন। নিম্নলিখিত কোডের উদাহরণে ডিক্লারেটিভ HTML ও প্রোগ্রাম্যাটিক পদ্ধতি ব্যবহার করে কাস্টম কন্ট্রোল যোগ করার বিষয়টি দেখানো হয়েছে।

ডিক্লারেটিভ CSS

নিম্নলিখিত CSS স্টাইল এমন একটি চেহারা প্রদান করে যা ডিফল্ট কন্ট্রোলের সাথে সামঞ্জস্যপূর্ণ। নিচের দুটি উদাহরণের সাথে এই স্টাইলগুলি ব্যবহার করুন:

.streetview-toggle-button {
  align-items: center;
  background: white;
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  color: rgb(86, 86, 86);
  cursor: pointer;
  display: flex;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  height: 40px;
  justify-content: center;
  margin: 10px 0;
  padding: 0 17px;
}

.streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}

ডিক্লারেটিভ HTML

এই কোড স্নিপেটগুলি দেখায় যে কীভাবে একটি কাস্টম কন্ট্রোল ডিক্লারেটিভভাবে তৈরি করা যায়। HTML-এ, container আইডি সহ DIV কন্ট্রোল পজিশন করতে ব্যবহার করা হয়; এটি gmp-map এলিমেন্টের মধ্যে নেস্ট করা থাকে এবং DIV-তে বোতাম যোগ করা হয়। ম্যাপের উপরে বাঁদিকের কোণে কন্ট্রোল পজিশন করতে slot অ্যাট্রিবিউট control-inline-start-block-start-এ সেট করা হয়।

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID">
  <div id="container" slot="control-inline-start-block-start">
    <input type="button"
    id="streetview-toggle-button"
    class="button"
    value="Click this button" />
  </div>
</gmp-map>

JavaScript-এ, DIV এবং বোতাম খুঁজতে getElementById() ব্যবহার করা হয়, বোতামে একটি ইভেন্ট লিসনার যোগ করা হয় এবং বোতামটি DIV-তে অ্যাপেন্ড করা হয়।

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Get the control button from the HTML page.
const controlButton = document.getElementById("streetview-toggle-button");

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

প্রোগ্রাম্যাটিক জাভাস্ক্রিপ্ট

এই কোড স্নিপেট প্রোগ্রামের সাহায্যে বোতাম কন্ট্রোল তৈরি করার পদ্ধতি দেখায়। CSS স্টাইল উপরে উল্লেখ করা হয়েছে।

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Position the control in the top left corner of the map.
container.slot = "control-block-start-inline-start";

// Create the control.
const controlButton = document.createElement("button");
controlButton.classList.add("streetview-toggle-button");
controlButton.textContent = "Click this button";
controlButton.type = "button";

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

কাস্টম কন্ট্রোল থেকে ইভেন্ট ম্যানেজ করা

কোনও কন্ট্রোলকে কার্যকর হতে হলে, সেটিকে আসলে কিছু করতে হবে। কন্ট্রোল কী করবে তা আপনার উপর নির্ভর করে। কন্ট্রোল ব্যবহারকারীর ইনপুটে সাড়া দিতে পারে অথবা এটি Map-এর অবস্থায় হওয়া পরিবর্তনে সাড়া দিতে পারে।

ব্যবহারকারীর ইনপুটের উত্তর দিতে, addEventListener() ব্যবহার করুন, যা কাজ করে এমন DOM ইভেন্ট ম্যানেজ করে। নিম্নলিখিত কোড স্নিপেট ব্রাউজারের 'click' ইভেন্টের জন্য লিসেনার যোগ করে। মনে রাখবেন যে এই ইভেন্টটি DOM থেকে পাওয়া গেছে, ম্যাপ থেকে নয়।

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

কাস্টম কন্ট্রোল অ্যাক্সেসযোগ্য করুন

কন্ট্রোল যাতে কীবোর্ড ইভেন্ট পায় এবং স্ক্রিন রিডারে সঠিকভাবে দেখা যায় তা নিশ্চিত করতে:

• বোতাম, ফর্ম এলিমেন্ট ও লেবেলের জন্য সবসময় নেটিভ HTML এলিমেন্ট ব্যবহার করুন। নেটিভ কন্ট্রোল ধরে রাখার জন্য কন্টেনার হিসেবে শুধুমাত্র DIV এলিমেন্ট ব্যবহার করুন; ইন্ট্যার‍্যাক্টিভ UI এলিমেন্ট হিসেবে DIV-কে কখনও অন্য উদ্দেশ্যে ব্যবহার করবেন না।
• UI এলিমেন্ট সম্পর্কে তথ্য প্রদান করতে, যেখানে উপযুক্ত সেখানে label এলিমেন্ট, title অ্যাট্রিবিউট বা aria-label অ্যাট্রিবিউট ব্যবহার করুন।

কাস্টম কন্ট্রোল পজিশন করুন

প্রয়োজনীয় কন্ট্রোল পজিশন উল্লেখ করে, কাস্টম কন্ট্রোল পজিশন করতে slot অ্যাট্রিবিউট ব্যবহার করুন। এইসব পজিশন সম্পর্কে তথ্যের জন্য, উপরে কন্ট্রোল পজিশনিং দেখুন।

প্রতিটি ControlPosition-এ সেই পজিশনে দেখানো কন্ট্রোলের MVCArray সেভ করা থাকে। এর ফলে, পজিশন থেকে কন্ট্রোল যোগ করা বা সরানো হলে, API সেই অনুযায়ী কন্ট্রোল আপডেট করবে।

নিম্নলিখিত কোডটি একটি নতুন কাস্টম কন্ট্রোল তৈরি করে (এর কনস্ট্রাক্টর দেখানো হয়নি) এবং এটিকে BLOCK_START_INLINE_END পজিশনে ম্যাপে যোগ করে (LTR প্রসঙ্গে উপরে-ডানদিকে)।

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Push the control to the BLOCK_START_INLINE_END position.
innerMap.controls[google.maps.ControlPosition.BLOCK_START_INLINE_END].push(centerControlDiv);

কাস্টম কন্ট্রোলের জন্য ডিক্লেরেটিভভাবে পজিশন সেট করতে, HTML-এ slot অ্যাট্রিবিউট সেট করুন:

<gmp-map center="30.72851568848909, -81.54675994068873" zoom="12">
  <div slot="control-block-start-inline-end">
    <!-- Control HTML -->
  </div>
</gmp-map>

কাস্টম কন্ট্রোলের উদাহরণ

নিম্নলিখিত কন্ট্রোলটি সহজ (যদিও বিশেষভাবে উপযোগী নয়) এবং উপরে দেখানো প্যাটার্নগুলিকে একত্রিত করে। এই কন্ট্রোল DOM 'click' ইভেন্টে সাড়া দেয়, ম্যাপকে একটি নির্দিষ্ট ডিফল্ট লোকেশনে কেন্দ্র করে:

TypeScript

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

জাভাস্ক্রিপ্ট

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js

মনে রাখবেন: TypeScript স্নিপেট থেকে জাভাস্ক্রিপ্ট কম্পাইল করা হয়।

উদাহরণ দেখুন

কন্ট্রোলে রাজ্য যোগ করুন

কন্ট্রোলও স্টোর স্টেট হতে পারে। নিচের উদাহরণটি আগে দেখানো উদাহরণের মতোই, তবে কন্ট্রোলে একটি অতিরিক্ত "হোম সেট করুন" বোতাম রয়েছে যা একটি নতুন হোম লোকেশন দেখানোর জন্য কন্ট্রোল সেট করে। আমরা এই স্ট্যাটাস স্টোর করার জন্য কন্ট্রোলের মধ্যে একটি home_ প্রপার্টি তৈরি করে এবং সেই স্ট্যাটাসের জন্য গেটার ও সেটার প্রদান করে এটি করি।

TypeScript

let innerMap: google.maps.Map;
const mapElement = document.querySelector('gmp-map')!;

let center: google.maps.LatLngLiteral | google.maps.LatLng = {
    lat: 41.85,
    lng: -87.65,
};

async function init() {
    await google.maps.importLibrary('maps');

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const centerMapButton = document.getElementById(
        'btnCenterMap'
    ) as HTMLInputElement;
    const setCenterButton = document.getElementById(
        'btnSetCenter'
    ) as HTMLInputElement;

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    centerMapButton.addEventListener('click', () => {
        const currentCenter = center;
        innerMap.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterButton.addEventListener('click', () => {
        const newCenter = innerMap.getCenter();

        if (newCenter) {
            center = newCenter;
        }
    });
}

void init();
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

জাভাস্ক্রিপ্ট

let innerMap;
const mapElement = document.querySelector('gmp-map');

let center = {
    lat: 41.85,
    lng: -87.65,
};

async function init() {
    await google.maps.importLibrary('maps');

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const centerMapButton = document.getElementById('btnCenterMap');
    const setCenterButton = document.getElementById('btnSetCenter');

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    centerMapButton.addEventListener('click', () => {
        const currentCenter = center;
        innerMap.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterButton.addEventListener('click', () => {
        const newCenter = innerMap.getCenter();

        if (newCenter) {
            center = newCenter;
        }
    });
}

void init();
index.js

উদাহরণ দেখুন