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

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

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

উন্নত মার্কার দিয়ে শুরু করুন

রঙ, স্কেল এবং আইকন চিত্র কাস্টমাইজ করুন

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

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

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

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

কাস্টম এইচটিএমএল মার্কার তৈরি করুন

কাস্টম HTML ও CSS ব্যবহার করে দৃষ্টিনন্দন ইন্টারেক্টিভ মার্কার এবং অ্যানিমেশন তৈরি করুন।

একটি কাস্টম এইচটিএমএল মার্কার দেখানো স্ক্রিনশট।

মার্কারগুলোকে ক্লিক এবং কিবোর্ড ইভেন্টে সাড়া দিতে সক্ষম করুন।

একটি 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.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

মার্কারের উচ্চতা এবং সংঘর্ষের আচরণ নির্ধারণ করুন

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

উচ্চতা-সমন্বিত একটি মার্কার দেখানো স্ক্রিনশট।

পরবর্তী পদক্ষেপ