মার্কারগুলিকে ক্লিকযোগ্য এবং অ্যাক্সেসযোগ্য করুন,মার্কারগুলিকে ক্লিকযোগ্য এবং অ্যাক্সেসযোগ্য করুন৷

যখন একটি মার্কার ক্লিকযোগ্য বা টেনে আনা যায়, তখন এটি কীবোর্ড এবং মাউস ইনপুটে প্রতিক্রিয়া জানাতে পারে। আপনি মাউস বা কীবোর্ড ব্যবহার করতে পারেন মার্কারগুলির মধ্যে সরানোর জন্য, এবং যদি এটি টেনে আনা যায় তাহলে একটি মার্কার সরাতে। title বিকল্পে নির্দিষ্ট করা পাঠ্য স্ক্রিন রিডারদের দ্বারা পাঠযোগ্য।

  • একটি মার্কারকে ক্লিকযোগ্য করতে, AdvancedMarkerElement.gmpClickable প্রপার্টিটিকে true এ সেট করুন এবং একটি ক্লিক ইভেন্ট হ্যান্ডলার যোগ করুন।
  • একটি মার্কারকে টেনে আনার যোগ্য করতে, AdvancedMarkerElement.gmpDraggable প্রপার্টিটিকে true এ সেট করুন।
  • একটি মার্কারের জন্য বর্ণনামূলক পাঠ্য সেট করতে, AdvancedMarkerElement.title বিকল্পটি ব্যবহার করুন।

একটি মার্কার ক্লিকযোগ্য করুন

নিম্নলিখিত উদাহরণটি পাঁচটি ক্লিকযোগ্য, ফোকাসযোগ্য মার্কার সহ একটি মানচিত্র দেখায়:

কীবোর্ড ব্যবহার করে মার্কার নেভিগেট করতে:

  1. প্রথম মার্কারে ফোকাস করতে ট্যাব কী ব্যবহার করুন; একই মানচিত্রে একাধিক মার্কার থাকলে, চিহ্নিতকারীর মধ্য দিয়ে সাইকেল করতে তীর কী ব্যবহার করুন।
  2. মার্কার ক্লিকযোগ্য হলে, "ক্লিক" করতে এন্টার কী টিপুন। যদি একটি মার্কারের একটি তথ্য উইন্ডো থাকে, আপনি ক্লিক করে বা এন্টার কী বা স্পেস বার টিপে এটি খুলতে পারেন। তথ্য উইন্ডো বন্ধ হয়ে গেলে, ফোকাস সংশ্লিষ্ট মার্কারে ফিরে আসবে।
  3. বাকি ম্যাপ কন্ট্রোলের মধ্যে দিয়ে চলতে চলতে আবার ট্যাব টিপুন।

কোড দেখুন

টাইপস্ক্রিপ্ট

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById("map") as HTMLElement, {
        zoom: 12,
        center: { lat: 34.84555, lng: -111.8035 },
        mapId: '4504f8b37365c3d0',
    });

    // Set LatLng and title text for the markers. The first marker (Boynton Pass)
    // receives the initial focus when tab is pressed. Use arrow keys to
    // move between markers; press tab again to cycle through the map controls.
    const tourStops = [
        {
            position: { lat: 34.8791806, lng: -111.8265049 }, 
            title: "Boynton Pass"
        },
        {
            position: { lat: 34.8559195, lng: -111.7988186 }, 
            title: "Airport Mesa"
        },
        {
            position: { lat: 34.832149, lng: -111.7695277 }, 
            title: "Chapel of the Holy Cross"
        },
        {
            position: { lat: 34.823736, lng: -111.8001857 }, 
            title: "Red Rock Crossing"
        },
        {
            position: { lat: 34.800326, lng: -111.7665047 }, 
            title: "Bell Rock"
        },
    ];

    // Create an info window to share between markers.
    const infoWindow = new InfoWindow();

    // Create the markers.
    tourStops.forEach(({position, title}, i) => {
        const pin = new PinElement({
            glyph: `${i + 1}`,
        });

        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
        });

        // Add a click listener for each marker, and set up the info window.
        marker.addListener('click', ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

initMap();
index.ts

জাভাস্ক্রিপ্ট

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
    mapId: "4504f8b37365c3d0",
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    {
      position: { lat: 34.8791806, lng: -111.8265049 },
      title: "Boynton Pass",
    },
    {
      position: { lat: 34.8559195, lng: -111.7988186 },
      title: "Airport Mesa",
    },
    {
      position: { lat: 34.832149, lng: -111.7695277 },
      title: "Chapel of the Holy Cross",
    },
    {
      position: { lat: 34.823736, lng: -111.8001857 },
      title: "Red Rock Crossing",
    },
    {
      position: { lat: 34.800326, lng: -111.7665047 },
      title: "Bell Rock",
    },
  ];
  // Create an info window to share between markers.
  const infoWindow = new InfoWindow();

  // Create the markers.
  tourStops.forEach(({ position, title }, i) => {
    const pin = new PinElement({
      glyph: `${i + 1}`,
    });
    const marker = new AdvancedMarkerElement({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pin.element,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", ({ domEvent, latLng }) => {
      const { target } = domEvent;

      infoWindow.close();
      infoWindow.setContent(marker.title);
      infoWindow.open(marker.map, marker);
    });
  });
}

initMap();
index.js

একটি মার্কারকে আবার ক্লিক করার অযোগ্য করতে, ক্লিক ইভেন্ট লিসেনার সরান:

// Adding the listener.
const clickListener = markerView.addListener('click', () => {...});

// Removing the listener.
google.maps.event.removeListener(clickListener);

একটি মার্কার টেনে আনা যায়

যখন ড্র্যাগযোগ্যতা সক্ষম করা হয়, ব্যবহারকারীরা মাউস বা তীর কী ব্যবহার করে মানচিত্রে মার্কারগুলিকে টেনে আনতে পারে৷ একটি মার্কারকে টেনে আনার যোগ্য করতে, AdvancedMarkerElement.gmpDraggable প্রপার্টিটিকে true এ সেট করুন।

নিম্নলিখিত উদাহরণ মানচিত্রটি একটি টেনে নেওয়াযোগ্য মার্কার দেখায় যা টেনে আনা শেষ হলে তার আপডেট করা অবস্থান প্রদর্শন করে ( dragend ইভেন্টটি গুলি করা হয়):

কীবোর্ড দিয়ে একটি মার্কার টেনে আনতে:

  1. মার্কার ফোকাস না হওয়া পর্যন্ত ট্যাব কী টিপুন।
  2. পছন্দসই মার্কারে যেতে তীর কী ব্যবহার করুন।
  3. ড্র্যাগিং সক্রিয় করতে, Option + Space বা Option + Enter (Mac), ALT + Space বা Alt + Enter (Windows) টিপুন।
  4. মার্কার সরাতে তীর কী ব্যবহার করুন।
  5. মার্কারটিকে তার নতুন অবস্থানে ড্রপ করতে, স্পেস বা এন্টার টিপুন। এটি টেনে আনা বন্ধও করবে।
  6. টেনে আনা বন্ধ করতে এবং মার্কারটিকে আগের অবস্থানে ফিরিয়ে আনতে, Esc টিপুন।

কোড দেখুন

টাইপস্ক্রিপ্ট

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById('map') as HTMLElement, {
        center: {lat: 37.39094933041195, lng: -122.02503913145092},
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        map,
        position: {lat: 37.39094933041195, lng: -122.02503913145092},
        gmpDraggable: true,
        title: "This marker is draggable.",
    });
    draggableMarker.addListener('dragend', (event) => {
        const position = draggableMarker.position as google.maps.LatLng;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });

}

initMap();
index.ts

জাভাস্ক্রিপ্ট

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 37.39094933041195, lng: -122.02503913145092 },
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });
  const infoWindow = new InfoWindow();
  const draggableMarker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.39094933041195, lng: -122.02503913145092 },
    gmpDraggable: true,
    title: "This marker is draggable.",
  });

  draggableMarker.addListener("dragend", (event) => {
    const position = draggableMarker.position;

    infoWindow.close();
    infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
    infoWindow.open(draggableMarker.map, draggableMarker);
  });
}

initMap();
index.js

বর্ণনামূলক পাঠ্য সেট করুন

একটি মার্কার জন্য বর্ণনামূলক পাঠ্য সেট করতে, যা স্ক্রিন রিডাররা পড়তে পারে, AdvancedMarkerElement.title অ্যাট্রিবিউট ব্যবহার করুন, যেমনটি এখানে দেখানো হয়েছে:

    const markerView = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: "Some descriptive text.",
    });

যখন title বৈশিষ্ট্য সেট করা হয়, পাঠ্যটি স্ক্রীন পাঠকদের কাছে দৃশ্যমান হয় এবং মাউসটি মার্কারের উপর ঘোরার সময় প্রদর্শিত হবে।

মার্কার স্কেল সেট করুন

মার্কারগুলির আকার বাড়ানো সমস্ত ডিভাইসে এর সাথে ইন্টারঅ্যাক্ট করার জন্য প্রয়োজনীয় নির্ভুলতা হ্রাস করে - বিশেষ করে টাচস্ক্রিন ডিভাইসগুলি - এবং অ্যাক্সেসযোগ্যতা উন্নত করে৷ ডিফল্ট মার্কারগুলি WCAG AA ন্যূনতম আকারের মান পূরণ করে তবে বিকাশকারীদের জন্য WCAG AAA লক্ষ্য আকারের মান মেনে চলার লক্ষ্যে মার্কার আকার বৃদ্ধি করা উচিত। কিভাবে একটি PinElement ব্যবহার করতে হয় এবং একটি মার্কারের আকার বাড়াতে তার স্কেল পরিবর্তন করতে হয় তা শিখতে মৌলিক মার্কার কাস্টমাইজেশন দেখুন।

এখানে একটি স্কেল আপ PinElement ব্যবহার করে একটি বড় মার্কার তৈরি করার একটি উদাহরণ রয়েছে:

    const pinScaled = new PinElement({
        scale: 2,
    });
    const markerScaled = new AdvancedMarkerElement({
        map,
        position: { lat: 37.419, lng: -122.02 },
        content: pinScaled.element,
    });