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

২১শে ফেব্রুয়ারী, ২০২৪ (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' পরীক্ষার উদ্দেশ্যে ব্যবহার করুন যদি আপনার ইতিমধ্যে একটি মানচিত্র আইডি না থাকে।

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

লাইব্রেরি লোড করার জন্য আপনি যে পদ্ধতিটি ব্যবহার করেন তা নির্ভর করে আপনার ওয়েব পৃষ্ঠাটি কীভাবে 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.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new 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 AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

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

উন্নত মার্কারগুলি এমনভাবে কাস্টমাইজ করা যেতে পারে যা আগে সম্ভব ছিল না। এখন আপনি মার্কারগুলির আকার (স্কেল) সামঞ্জস্য করতে পারেন এবং পটভূমি, সীমানা এবং গ্লিফের রঙ পরিবর্তন করতে পারেন। কাস্টম গ্রাফিক চিত্রগুলি ব্যবহার করা সহজ, এবং এখন HTML এবং CSS ব্যবহার করে কাস্টম মার্কার তৈরি করা সম্ভব। উন্নত মার্কারগুলির সাথে আপনি যা করতে পারেন সে সম্পর্কে আরও জানুন: