মার্কারের ওভারভিউ

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

ম্যাপে একটি লোকেশন দেখানোর জন্য মার্কার ব্যবহার করুন। এই নির্দেশিকা আপনাকে দেখায় কীভাবে উন্নত মার্কার ব্যবহার করতে হয়। উন্নত মার্কারের সাহায্যে আপনি অত্যন্ত পারফর্ম্যান্ট মার্কার তৈরি ও কাস্টমাইজ করতে পারবেন এবং অ্যাক্সেসযোগ্য মার্কার তৈরি করতে পারবেন যা gmp-click ইভেন্ট এবং কীবোর্ড ইনপুটে সাড়া দেয়। আরও বেশি কাস্টমাইজেশনের জন্য, উন্নত মার্কার কাস্টম HTML এবং CSS-এর ব্যবহার সমর্থন করে, যার মধ্যে সম্পূর্ণ কাস্টম মার্কার তৈরি করার ক্ষমতাও অন্তর্ভুক্ত। 3D অ্যাপ্লিকেশনের জন্য আপনি উচ্চতা নিয়ন্ত্রণ করতে পারেন যেখানে একটি মার্কার দেখা যায়। র‍্যাস্টার ও ভেক্টর ম্যাপ, দুটিতেই উন্নত মার্কার কাজ করে (যদিও র‍্যাস্টার ম্যাপে কিছু ফিচার উপলভ্য নয়)। উন্নত মার্কার ব্যবহার করার জন্য ম্যাপ আইডি প্রয়োজন (DEMO_MAP_ID ব্যবহার করা যেতে পারে)।

উন্নত মার্কার ব্যবহার শুরু করা

রঙ, স্কেল ও আইকন ছবি কাস্টমাইজ করুন

ডিফল্ট মার্কারের ব্যাকগ্রাউন্ড, গ্লিফ ও বর্ডারের রঙ কাস্টমাইজ করুন এবং মার্কারের সাইজ অ্যাডজাস্ট করুন।

একটি স্ক্রিনশট যেখানে কিছু কাস্টমাইজ করা মার্কার দেখানো হয়েছে।

ডিফল্ট মার্কার আইকনটি কাস্টম SVG বা PNG ছবি দিয়ে পরিবর্তন করুন।

কাস্টম SVG মার্কার দেখানো স্ক্রিনশট।

কাস্টম HTML মার্কার তৈরি করা

কাস্টম HTML ও CSS ব্যবহার করে ভিজ্যুয়ালি আলাদা ইন্টার‍্যাক্টিভ মার্কার তৈরি করুন এবং অ্যানিমেশন তৈরি করুন।

কাস্টম HTML মার্কার দেখানো স্ক্রিনশট।

ক্লিক ও কীবোর্ড ইভেন্টে মার্কারকে রেসপন্ড করতে দিন

gmp-click ইভেন্ট লিসনার যোগ করে ক্লিক ও কীবোর্ড ইভেন্টে মার্কারের প্রতিক্রিয়া জানান।

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  marker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

মার্কারের উচ্চতা ও কলিশন বিহেভিওর সেট করা

3D ম্যাপ এলিমেন্টের সাথে সঠিকভাবে দেখানোর জন্য মার্কারের উচ্চতা সেট করুন এবং অন্য মার্কার বা ম্যাপ লেবেলের সাথে সংঘর্ষ হলে মার্কারের আচরণ কেমন হওয়া উচিত তা নির্দিষ্ট করুন। মার্কারের উচ্চতা শুধুমাত্র ভেক্টর ম্যাপে কাজ করে।

স্ক্রিনশটে উচ্চতা-অ্যাডজাস্ট করা মার্কার দেখানো হয়েছে।

পরের ধাপ