21শে ফেব্রুয়ারী, 2024 (v3.56) হিসাবে, google.maps.Marker বাতিল করা হয়েছে৷ আমরা আপনাকে নতুন google.maps.marker.AdvancedMarkerElement ক্লাসে রূপান্তর করতে উত্সাহিত করি৷ উন্নত মার্কারগুলি লিগ্যাসি google.maps.Marker ক্লাসে উল্লেখযোগ্য উন্নতি প্রদান করে৷
একটি লিগ্যাসি মার্কারকে একটি উন্নত মার্কার হতে আপডেট করতে, নিম্নলিখিত পদক্ষেপগুলি নিন:
- মার্কার লাইব্রেরি আমদানি করতে কোড যোগ করুন। উল্লেখ্য যে মার্কারগুলির পূর্ববর্তী সংস্করণে (
google.maps.Marker) এই প্রয়োজনীয়তা নেই৷ -
google.maps.Markerকেgoogle.maps.marker.AdvancedMarkerElementএ পরিবর্তন করুন - আপনার মানচিত্র প্রারম্ভিক কোড একটি মানচিত্র ID যোগ করুন. উদাহরণ স্বরূপ
mapId: 'DEMO_MAP_ID'পরীক্ষার উদ্দেশ্যে যদি আপনার কাছে ইতিমধ্যেই একটি মানচিত্র ID না থাকে।
অ্যাডভান্সড মার্কার লাইব্রেরি যোগ করুন
লাইব্রেরি লোড করার জন্য আপনি যে পদ্ধতি ব্যবহার করেন তা নির্ভর করে আপনার ওয়েব পৃষ্ঠা কীভাবে মানচিত্র জাভাস্ক্রিপ্ট API লোড করে।
যদি আপনার ওয়েব পৃষ্ঠা ডায়নামিক স্ক্রিপ্ট লোডিং ব্যবহার করে, তাহলে মার্কার লাইব্রেরি যোগ করুন এবং রানটাইমে
AdvancedMarkerElement(এবং ঐচ্ছিকভাবেPinElement) আমদানি করুন, যেমনটি এখানে দেখানো হয়েছে।const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");আপনার ওয়েব পেজ যদি লিগ্যাসি ডাইরেক্ট স্ক্রিপ্ট লোডিং ট্যাগ ব্যবহার করে, তাহলে লোডিং স্ক্রিপ্টে
libraries=markerযোগ করুন, যেমনটি নিচের স্নিপেটে দেখানো হয়েছে।<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker" defer ></script>
Maps JavaScript API লোড করার বিষয়ে আরও জানুন
উদাহরণ
নিম্নলিখিত কোড উদাহরণগুলি একটি উত্তরাধিকার মার্কার যোগ করার জন্য কোড দেখায়, উন্নত মার্কার ব্যবহার করে একই উদাহরণের জন্য কোড অনুসরণ করে:
মাইগ্রেশনের আগে
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: position,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
map: map,
position: position,
title: 'Uluru',
});
মাইগ্রেশনের পর
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: position,
mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
});
// The advanced marker, positioned at Uluru
const marker = new google.maps.marker.AdvancedMarkerElement({
map,
position: position,
title: 'Uluru',
});
উন্নত মার্কার বৈশিষ্ট্য অন্বেষণ
উন্নত মার্কারগুলি এমনভাবে কাস্টমাইজ করা যেতে পারে যা আগে সম্ভব ছিল না। এখন আপনি মার্কারগুলির আকার (স্কেল) সামঞ্জস্য করতে পারেন এবং পটভূমি, সীমানা এবং গ্লিফের রঙ পরিবর্তন করতে পারেন। কাস্টম গ্রাফিক ছবিগুলির সাথে কাজ করা সহজ, এবং এখন HTML এবং CSS ব্যবহার করে কাস্টম মার্কার রচনা করা সম্ভব। উন্নত মার্কারগুলির সাথে আপনি যা করতে পারেন সে সম্পর্কে আরও জানুন: