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

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

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

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

নিম্নলিখিত মানচিত্রটি মানচিত্র জাভাস্ক্রিপ্ট API দ্বারা প্রদর্শিত নিয়ন্ত্রণের ডিফল্ট সেট দেখায়:

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

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

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

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

ডিফল্ট UI

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

সম্পূর্ণ স্ক্রীন নিয়ন্ত্রণ ব্যতীত মোবাইল এবং ডেস্কটপ ডিভাইসগুলিতে নিয়ন্ত্রণগুলির আচরণ এবং চেহারা একই রকম ( নিয়ন্ত্রণের তালিকায় বর্ণিত আচরণ দেখুন)৷

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

ডিফল্ট UI নিষ্ক্রিয় করা হচ্ছে

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

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

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      disableDefaultUI: true,
    }
  );
}

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

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

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

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

মানচিত্রে নিয়ন্ত্রণ যোগ করা হচ্ছে

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

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

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

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

মানচিত্রের আকার zoomControl দৃশ্যমান?
যে কোন false না
যে কোন true হ্যাঁ
>= 200x200px undefined হ্যাঁ
< 200x200px undefined না

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

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: false,
      scaleControl: true,
    }
  );
}

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

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    zoomControl: false,
    scaleControl: true,
  });
}

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

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

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

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

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

উদাহরণস্বরূপ, মানচিত্র প্রকার নিয়ন্ত্রণ পরিবর্তন করার বিকল্পগুলি mapTypeControlOptions ক্ষেত্রে নির্দেশিত হয়। মানচিত্র প্রকার নিয়ন্ত্রণ নিম্নলিখিত style বিকল্পগুলির মধ্যে একটিতে প্রদর্শিত হতে পারে:

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

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

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

নিচের উদাহরণটি দেখায় কিভাবে ডিফল্ট অবস্থান এবং নিয়ন্ত্রণের শৈলী পরিবর্তন করতে হয়।

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

// You can set control options to change the default position or style of many
// of the map controls.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

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

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

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ["roadmap", "terrain"],
    },
  });
}

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

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

নিয়ন্ত্রণগুলি সাধারণত মানচিত্র তৈরি করার পরে কনফিগার করা হয়। যাইহোক, আপনি Map setOptions() পদ্ধতিতে কল করে, নতুন নিয়ন্ত্রণ বিকল্পগুলি পাস করে গতিশীলভাবে নিয়ন্ত্রণের উপস্থাপনা পরিবর্তন করতে পারেন।

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

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

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

মনে রাখবেন যে আপনি প্রাথমিকভাবে অক্ষম করা নিয়ন্ত্রণগুলির জন্য বিকল্পগুলি নির্দিষ্ট করতে পারেন৷

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

বেশিরভাগ নিয়ন্ত্রণ বিকল্পে একটি position বৈশিষ্ট্য রয়েছে (Type ControlPosition ) যা নির্দেশ করে যে মানচিত্রে কোথায় নিয়ন্ত্রণ রাখতে হবে। এই নিয়ন্ত্রণগুলির অবস্থান সম্পূর্ণ নয়। পরিবর্তে, API প্রদত্ত সীমাবদ্ধতার মধ্যে (যেমন মানচিত্রের আকার) বিদ্যমান মানচিত্রের উপাদানগুলি বা অন্যান্য নিয়ন্ত্রণগুলির চারপাশে প্রবাহিত করে বুদ্ধিমত্তার সাথে নিয়ন্ত্রণগুলি তৈরি করবে।

দ্রষ্টব্য : কোন গ্যারান্টি দেওয়া যাবে না যে নিয়ন্ত্রণগুলি জটিল লেআউটগুলিকে ওভারল্যাপ করতে পারে না, যদিও API তাদের বুদ্ধিমত্তার সাথে সাজানোর চেষ্টা করবে৷

নিম্নলিখিত নিয়ন্ত্রণ অবস্থানগুলি সমর্থিত:

  • TOP_CENTER নির্দেশ করে যে নিয়ন্ত্রণটি মানচিত্রের শীর্ষ কেন্দ্র বরাবর স্থাপন করা উচিত।
  • TOP_LEFT নির্দেশ করে যে নিয়ন্ত্রণটিকে মানচিত্রের উপরের বাম পাশে স্থাপন করা উচিত, নিয়ন্ত্রণের যেকোনো উপ-উপাদান উপরের কেন্দ্রের দিকে "প্রবাহিত" সহ।
  • TOP_RIGHT নির্দেশ করে যে নিয়ন্ত্রণটিকে মানচিত্রের উপরের ডানদিকে রাখা উচিত, নিয়ন্ত্রণের যেকোনো উপ-উপাদান উপরের কেন্দ্রের দিকে "প্রবাহিত" সহ।
  • LEFT_TOP নির্দেশ করে যে নিয়ন্ত্রণটি মানচিত্রের উপরের বাম পাশে রাখা উচিত, কিন্তু যেকোনো TOP_LEFT উপাদানের নীচে।
  • RIGHT_TOP নির্দেশ করে যে নিয়ন্ত্রণটি মানচিত্রের উপরের ডানদিকে রাখা উচিত, কিন্তু যেকোনো TOP_RIGHT উপাদানের নীচে।
  • LEFT_CENTER নির্দেশ করে যে নিয়ন্ত্রণটি মানচিত্রের বাম পাশে স্থাপন করা উচিত, TOP_LEFT এবং BOTTOM_LEFT অবস্থানের মধ্যে কেন্দ্রীভূত।
  • RIGHT_CENTER নির্দেশ করে যে নিয়ন্ত্রণটি মানচিত্রের ডান পাশে স্থাপন করা উচিত, TOP_RIGHT এবং BOTTOM_RIGHT অবস্থানের মধ্যে কেন্দ্রীভূত।
  • LEFT_BOTTOM নির্দেশ করে যে নিয়ন্ত্রণটি মানচিত্রের নীচে বাম দিকে রাখা উচিত, কিন্তু যেকোন BOTTOM_LEFT উপাদানের উপরে।
  • RIGHT_BOTTOM নির্দেশ করে যে নিয়ন্ত্রণটি মানচিত্রের নীচের ডানদিকে রাখা উচিত, কিন্তু যেকোন BOTTOM_RIGHT উপাদানের উপরে।
  • BOTTOM_CENTER নির্দেশ করে যে নিয়ন্ত্রণটি মানচিত্রের নীচের কেন্দ্র বরাবর স্থাপন করা উচিত।
  • BOTTOM_LEFT নির্দেশ করে যে নিয়ন্ত্রণটি মানচিত্রের নীচের বাম বরাবর স্থাপন করা উচিত, নিয়ন্ত্রণের যেকোনো উপ-উপাদান নীচের কেন্দ্রের দিকে "প্রবাহিত" সহ।
  • BOTTOM_RIGHT নির্দেশ করে যে নিয়ন্ত্রণটি মানচিত্রের নীচের ডানদিকে রাখা উচিত, নিয়ন্ত্রণের যেকোনো উপ-উপাদানগুলিকে নীচের কেন্দ্রের দিকে "প্রবাহিত" করা উচিত।

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

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

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

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 গঠন সম্পর্কে কিছু জ্ঞান প্রয়োজন। নিম্নলিখিত কোডটি একটি বোতাম উপাদান তৈরি করার জন্য একটি ফাংশন দেখায় যা মানচিত্রটিকে শিকাগোকে কেন্দ্র করে প্যান করে।

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;
}

কাস্টম কন্ট্রোল থেকে ইভেন্ট পরিচালনা করা

একটি নিয়ন্ত্রণ কার্যকর হওয়ার জন্য, এটি আসলে কিছু করতে হবে। নিয়ন্ত্রণ কি করে তা আপনার উপর নির্ভর করে। নিয়ন্ত্রণ ব্যবহারকারীর ইনপুটের প্রতিক্রিয়া জানাতে পারে, অথবা এটি 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 বৈশিষ্ট্য ব্যবহার করুন।

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

কাস্টম কন্ট্রোল Map অবজেক্টের controls প্রোপার্টির মধ্যে উপযুক্ত অবস্থানে রেখে ম্যাপে অবস্থান করা হয়। এই সম্পত্তিতে google.maps.ControlPosition s এর একটি অ্যারে রয়েছে৷ আপনি একটি উপযুক্ত ControlPosition Node (সাধারণত <div> ) যোগ করে মানচিত্রে একটি কাস্টম নিয়ন্ত্রণ যোগ করুন। (এই অবস্থান সম্পর্কে তথ্যের জন্য, উপরে কন্ট্রোল পজিশনিং দেখুন।)

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

এপিআই একটি index সম্পত্তির ক্রম অনুসারে প্রতিটি অবস্থানে নিয়ন্ত্রণ রাখে; একটি নিম্ন সূচক সঙ্গে নিয়ন্ত্রণ প্রথম স্থাপন করা হয়. উদাহরণস্বরূপ, BOTTOM_RIGHT অবস্থানে দুটি কাস্টম নিয়ন্ত্রণ এই সূচকের ক্রম অনুসারে স্থাপন করা হবে, নিম্ন সূচক মান অগ্রাধিকার পাবে। ডিফল্টরূপে, সমস্ত কাস্টম নিয়ন্ত্রণ কোনো API ডিফল্ট নিয়ন্ত্রণ স্থাপন করার পরে স্থাপন করা হয়। আপনি একটি নিয়ন্ত্রণের index সম্পত্তি একটি নেতিবাচক মান হিসাবে সেট করে এই আচরণ ওভাররাইড করতে পারেন৷ কাস্টম নিয়ন্ত্রণগুলি লোগোর বাম দিকে বা কপিরাইটের ডানদিকে রাখা যাবে না৷

নিম্নলিখিত কোডটি একটি নতুন কাস্টম নিয়ন্ত্রণ তৈরি করে (এর কনস্ট্রাক্টর দেখানো হয় না) এবং এটিকে TOP_RIGHT অবস্থানে মানচিত্রে যোগ করে।

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// 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);

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

একটি কাস্টম নিয়ন্ত্রণ উদাহরণ

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

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