উন্নত মার্কার ব্যবহার করা শুরু করা

২১ ফেব্রুয়ারি, ২০২৪ (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'পরীক্ষা করার উদ্দেশ্যে, আপনার কাছে আগে থেকেই কোনও ম্যাপ আইডি না থাকলে।

Advanced Marker লাইব্রেরি যোগ করা

লাইব্রেরি লোড করার জন্য আপনি যে পদ্ধতি ব্যবহার করেন তা নির্ভর করে আপনার ওয়েব পেজ কীভাবে 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',
});

মাইগ্রেশনের পরে

// 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 ব্যবহার করে কাস্টম মার্কার কম্পোজ করা সম্ভব। উন্নত মার্কারের সাহায্যে আপনি কী কী করতে পারবেন সেই সম্পর্কে আরও জানুন: