উন্নত মার্কারগুলিতে স্থানান্তর করুন৷

২১শে ফেব্রুয়ারী, ২০২৪ (v3.56) থেকে, google.maps.Marker অপ্রচলিত হয়ে গেছে। আমরা আপনাকে নতুন google.maps.marker.AdvancedMarkerElement ক্লাসটি ব্যবহার শুরু করার জন্য উৎসাহিত করছি। অ্যাডভান্সড মার্কারগুলো পুরোনো google.maps.Marker ক্লাসের তুলনায় উল্লেখযোগ্য উন্নতি প্রদান করে। এই অপ্রচলিতকরণ সম্পর্কে আরও জানুন।

একটি লিগ্যাসি মার্কারকে অ্যাডভান্সড মার্কারে আপডেট করতে, নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করুন:

  1. মার্কার লাইব্রেরি ইম্পোর্ট করার জন্য কোড যোগ করুন (নিচের ধাপগুলো দেখুন)।
  2. google.maps.Marker কে google.maps.marker.AdvancedMarkerElement এ পরিবর্তন করুন; যদি আপনার ইম্পোর্ট স্টেটমেন্টে AdvancedMarker ডিক্লেয়ার করা থাকে, তাহলে আপনি কোয়ালিফাইড পাথটি বাদ দিতে পারেন।
  3. আপনার ম্যাপ ইনিশিয়ালাইজেশন কোডে একটি ম্যাপ আইডি যোগ করুন। উদাহরণস্বরূপ, পরীক্ষার উদ্দেশ্যে mapId: 'DEMO_MAP_ID' , যদি আপনার আগে থেকে কোনো ম্যাপ আইডি না থাকে।

অ্যাডভান্সড মার্কার লাইব্রেরি যোগ করুন

আপনার ওয়েব পেজ কীভাবে ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করে, তার ওপর নির্ভর করে আপনি লাইব্রেরি লোড করার পদ্ধতি ব্যবহার করবেন।

  • আপনার ওয়েব পেজে যদি ডাইনামিক লাইব্রেরি ইম্পোর্ট ব্যবহার করা হয়, তাহলে এখানে দেখানো পদ্ধতি অনুযায়ী রানটাইমে মার্কারস লাইব্রেরিটি যোগ করুন এবং 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',
});

স্থানান্তরের পরে 

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;

// 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/Ayers Rock',
});

উন্নত মার্কার বৈশিষ্ট্যগুলি অন্বেষণ করুন

অ্যাডভান্সড মার্কারগুলো এখন এমনভাবে কাস্টমাইজ করা যায় যা আগে সম্ভব ছিল না। এখন আপনি মার্কারের সাইজ (স্কেল) অ্যাডজাস্ট করতে পারবেন এবং ব্যাকগ্রাউন্ড, বর্ডার ও গ্লিফের রং পরিবর্তন করতে পারবেন। কাস্টম গ্রাফিক ইমেজ নিয়ে কাজ করা এখন আরও সহজ, এবং HTML ও CSS ব্যবহার করে কাস্টম মার্কার তৈরি করাও সম্ভব। অ্যাডভান্সড মার্কার দিয়ে আপনি যা যা করতে পারেন, সে সম্পর্কে আরও জানুন: