নিয়ন্ত্রণ করে

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

নিয়ন্ত্রণগুলির সংক্ষিপ্ত বিবরণ

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

নিম্নলিখিত মানচিত্রটি Maps JavaScript API দ্বারা প্রদর্শিত ডিফল্ট কন্ট্রোল সেটটি দেখাচ্ছে:

উপরের বাম দিক থেকে ঘড়ির কাঁটার দিকে: মানচিত্রের ধরন, পূর্ণ পর্দা, ক্যামেরা, স্ট্রিট ভিউ, কিবোর্ড শর্টকাট।

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

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

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

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

ডিফল্ট UI

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

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

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

ডিফল্ট UI নিষ্ক্রিয় করুন

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

নিম্নলিখিত কোডটি UI বাটনগুলিকে নিষ্ক্রিয় করে:

টাইপস্ক্রিপ্ট 

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

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

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
}

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

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

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

টাইপস্ক্রিপ্ট 

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

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

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.js
উদাহরণ দেখুন

নমুনা চেষ্টা করুন

নিয়ন্ত্রণ বিকল্প

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

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

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

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

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

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

নিম্নলিখিত উদাহরণটিতে কন্ট্রোলগুলির ডিফল্ট অবস্থান এবং স্টাইল পরিবর্তন করার পদ্ধতি দেখানো হয়েছে।

টাইপস্ক্রিপ্ট 

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

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

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});
index.js
উদাহরণ দেখুন

নমুনা চেষ্টা করুন

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

নিয়ন্ত্রণগুলি পরিবর্তন করুন

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

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

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

নিয়ন্ত্রণ অবস্থান

বেশিরভাগ কন্ট্রোল অপশনেই একটি position প্রপার্টি ( ControlPosition টাইপের) থাকে, যা নির্দেশ করে ম্যাপের কোথায় কন্ট্রোলটি স্থাপন করতে হবে। এই কন্ট্রোলগুলোর অবস্থান চূড়ান্ত নয়। এর পরিবর্তে, এপিআই প্রদত্ত সীমাবদ্ধতার (যেমন ম্যাপের আকার) মধ্যে বিদ্যমান ম্যাপ এলিমেন্ট বা অন্যান্য কন্ট্রোলের চারপাশে ঘুরিয়ে বুদ্ধিমত্তার সাথে কন্ট্রোলগুলোকে বিন্যস্ত করে।

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

নিম্নলিখিত সারণিগুলিতে LTR এবং RTL প্রেক্ষাপটে সমর্থিত কন্ট্রোল পজিশনগুলি দেখানো হয়েছে।

এলটিআর অবস্থান

অবস্থান (বাম থেকে ডানে) যৌক্তিক ধ্রুবক (প্রস্তাবিত) লিগ্যাসি কনস্ট্যান্ট
উপরের বাম দিকে 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

আরটিএল পদ

অবস্থান (আরটিএল প্রেক্ষাপট) যৌক্তিক ধ্রুবক (প্রস্তাবিত) লিগ্যাসি কনস্ট্যান্ট
উপরের ডানদিকে 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 উপাদানের অবস্থানের সাথে মিলে যেতে পারে, যেগুলির স্থান আপনি পরিবর্তন করতে পারবেন না (যেমন কপিরাইট এবং গুগল লোগো)। সেই ক্ষেত্রে, কন্ট্রোলগুলি প্রতিটি অবস্থানের জন্য উল্লিখিত যুক্তি অনুসারে বিন্যস্ত হবে এবং তাদের নির্দেশিত অবস্থানের যথাসম্ভব কাছাকাছি প্রদর্শিত হবে। জটিল লেআউটের ক্ষেত্রে কন্ট্রোলগুলি একে অপরের উপর ওভারল্যাপ করবে না, এমন কোনো নিশ্চয়তা দেওয়া যায় না, যদিও API সেগুলিকে বুদ্ধিমত্তার সাথে সাজানোর চেষ্টা করবে।

নিম্নলিখিত উদাহরণটি একটি সাধারণ মানচিত্র দেখায়, যেখানে সমস্ত নিয়ন্ত্রণ সক্রিয় অবস্থায় বিভিন্ন অবস্থানে রয়েছে।

টাইপস্ক্রিপ্ট 

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

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

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

initMap();
index.ts

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

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}
initMap();
index.js
উদাহরণ দেখুন

নমুনা চেষ্টা করুন

কাস্টম নিয়ন্ত্রণ

বিদ্যমান এপিআই কন্ট্রোলগুলোর স্টাইল ও অবস্থান পরিবর্তন করার পাশাপাশি, আপনি ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন পরিচালনার জন্য নিজের কন্ট্রোলও তৈরি করতে পারেন। কন্ট্রোল হলো স্থির উইজেট যা একটি ম্যাপের উপরে নির্দিষ্ট অবস্থানে ভেসে থাকে; এর বিপরীতে ওভারলে নিচের ম্যাপের সাথে সাথে নড়াচড়া করে। আরও মৌলিকভাবে বলতে গেলে, একটি কন্ট্রোল হলো একটি <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 ID-সহ একটি 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>

জাভাস্ক্রিপ্টে, 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 এলিমেন্ট ব্যবহার করুন; কখনও একটি DIV-কে ইন্টারেক্টিভ UI এলিমেন্ট হিসেবে পুনরায় ব্যবহার করবেন না।
  • কোনো 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' ইভেন্টের প্রতিক্রিয়ায় ম্যাপটিকে একটি নির্দিষ্ট ডিফল্ট অবস্থানে কেন্দ্র করে স্থাপন করে:

টাইপস্ক্রিপ্ট 

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

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

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
উদাহরণ দেখুন

নমুনা চেষ্টা করুন

নিয়ন্ত্রণে রাজ্য যোগ করুন

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

টাইপস্ক্রিপ্ট 

let innerMap;
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

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

async function initMap() {
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

    innerMap = mapElement.innerMap;

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

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    setCenterButton.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.
    resetCenterButton.addEventListener('click', () => {
        const newCenter = innerMap.getCenter();

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

initMap();
index.ts

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

let innerMap;
const mapElement = document.querySelector('gmp-map');
let center = { lat: 41.85, lng: -87.65 };
async function initMap() {
    (await google.maps.importLibrary('maps'));
    innerMap = mapElement.innerMap;
    // Get the button UI elements.
    const setCenterButton = document.getElementById('btnCenterMap');
    const resetCenterButton = document.getElementById('btnSetCenter');
    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    setCenterButton.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.
    resetCenterButton.addEventListener('click', () => {
        const newCenter = innerMap.getCenter();
        if (newCenter) {
            center = newCenter;
        }
    });
}
initMap();
index.js
উদাহরণ দেখুন

নমুনা চেষ্টা করুন