মার্কার

ম্যাপে কোনও লোকেশনের দিকে ব্যবহারকারীর দৃষ্টি আকর্ষণ করতে মার্কার ব্যবহার করুন। এই গাইড ৩D ম্যাপে কীভাবে মার্কার ব্যবহার ও কাস্টমাইজ করতে হয় তা দেখায়। আপনি মার্কারের আকার, সাইজ ও রঙ নিয়ন্ত্রণ করতে পারবেন, এর সাথে মার্কারটি কত উচ্চতায় দেখা যাবে তাও নিয়ন্ত্রণ করতে পারবেন। নিম্নলিখিত উদাহরণে একটি বেসিক মার্কার দেখানো হয়েছে:

Maps JavaScript-এ 3D ম্যাপ দুটি আলাদা মার্কার ক্লাস প্রদান করে, প্রতিটি নির্দিষ্ট ব্যবহারের জন্য অপ্টিমাইজ করা হয়। নিম্নলিখিত সারণীতে উপলভ্য দুটি ক্লাসের মধ্যে পার্থক্য ও ট্রেড-অফ দেখানো হয়েছে:

ক্ষমতা	MarkerElement	Marker3DElement
কাস্টমাইজেশন	বেশি (কাস্টম HTML এলিমেন্ট, কোর অ্যানিমেশন API ইত্যাদি কাজ করে)	কম (কম কাস্টমাইজ করা যায়)
পারফর্ম্যান্স	ইন্টার‍্যাকশন পারফর্ম্যান্স কম হওয়া (অনেক বেশি মার্কারের জন্য FPS কমে যাওয়া)	আরও ভালো ইন্টার‍্যাকশন পারফর্ম্যান্স (বড় ডেটাসেট রেন্ডার করার জন্য অপ্টিমাইজ করা)
সাজেস্ট করা ক্ষমতা	প্রায় ১,০০০ মার্কার পর্যন্ত নির্ভরযোগ্য ইন্টার‍্যাকশন পারফর্ম্যান্স	১,০০০টির বেশি মার্কার ম্যানেজ করার জন্য সাজেস্ট করা হয়

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

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

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

মার্কারের উচ্চতা সেট করুন

আপনি মার্কার এক্সট্রুড করে এবং উচ্চতা সেট করে মার্কারের উচ্চতা সেট করতে পারেন।

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

click ইভেন্ট লিসনার যোগ করে মার্কারকে ক্লিক ও কীবোর্ড ইভেন্টের উত্তর দেওয়ার মতো করে তুলুন।

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});
index.js

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

কোনও মার্কার অন্য মার্কার বা ম্যাপ লেবেলের সাথে ওভারল্যাপ করলে সেটি কীভাবে কাজ করবে তা নির্দিষ্ট করুন।

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});
index.js

মার্কার পারফর্ম্যান্স

কাস্টম HTML মার্কার (MarkerElement) স্ট্যান্ডার্ড 3D মার্কারের (Marker3DElement) তুলনায় কম পারফর্ম্যান্স প্রদান করে। ১,০০০-এর বেশি মার্কার সহ অ্যাপ্লিকেশনের জন্য, সর্বোত্তম পারফর্ম্যান্স নিশ্চিত করতে Marker3dElement ক্লাস ব্যবহার করার জন্য বিশেষভাবে উৎসাহিত করা হয়।

পরের ধাপ

• মার্কার যোগ করা