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

২১শে ফেব্রুয়ারী, ২০২৪ (v3.56) থেকে, google.maps.Marker বন্ধ করা হয়েছে। আমরা আপনাকে নতুন google.maps.marker.AdvancedMarkerElement ক্লাসে স্থানান্তর করতে উৎসাহিত করছি। উন্নত মার্কারগুলি লিগ্যাসি google.maps.Marker ক্লাসের তুলনায় যথেষ্ট উন্নতি প্রদান করে।

এই বন্ধ করার বিষয়ে আরও জানুন

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

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

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

লাইব্রেরি লোড করার জন্য আপনি যে পদ্ধতিটি ব্যবহার করেন তা নির্ভর করে আপনার ওয়েব পৃষ্ঠাটি কীভাবে Maps JavaScript 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 ব্যবহার করে কাস্টম মার্কার তৈরি করা সম্ভব। উন্নত মার্কারগুলির সাথে আপনি যা করতে পারেন সে সম্পর্কে আরও জানুন: