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

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

নিয়ন্ত্রণ ওভারভিউ

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 অক্ষম করুন

আপনি API-এর ডিফল্ট UI বোতামগুলি সম্পূর্ণরূপে বন্ধ করতে চাইতে পারেন। এটি করার জন্য, map-এর disableDefaultUI প্রোপার্টি ( MapOptions অবজেক্টের মধ্যে) true তে সেট করুন। এই প্রোপার্টিটি Maps JavaScript API থেকে যেকোনো UI কন্ট্রোল বোতাম অক্ষম করে। তবে, এটি বেস ম্যাপে মাউস জেসচার বা কীবোর্ড শর্টকাটগুলিকে প্রভাবিত করে না, যা যথাক্রমে 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
}

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

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

নিম্নলিখিত সারণীগুলি LTR এবং RTL প্রসঙ্গে সমর্থিত নিয়ন্ত্রণ অবস্থানগুলি দেখায়।

এলটিআর পদ

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

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

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

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

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -28.643387, lng: 153.612224 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP,
    },
    fullscreenControl: true,
  });
}

window.initMap = initMap;
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-এ, ID 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>

জাভাস্ক্রিপ্টে, getElementById() ব্যবহার করে DIV এবং বোতামটি খুঁজে বের করা হয়, বোতামটিতে একটি ইভেন্ট লিসেনার যোগ করা হয় এবং বোতামটি 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' ইভেন্টগুলিতে প্রতিক্রিয়া জানায়:

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

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 map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

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

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

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

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  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 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

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

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js
উদাহরণ দেখুন

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