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

আপনি ক্লিক ইভেন্ট হ্যান্ডলিং সক্ষম করে, স্ক্রিন পাঠকদের জন্য বর্ণনামূলক পাঠ্য যোগ করে এবং মার্কার স্কেল সামঞ্জস্য করে মার্কারগুলিকে আরও অ্যাক্সেসযোগ্য করে তুলতে পারেন।

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

কীভাবে মার্কার স্কেল পরিবর্তন করতে হয়, শিরোনাম পাঠ্য যোগ করতে হয় এবং আরও অনেক কিছু শিখতে প্রাথমিক মার্কার কাস্টমাইজেশন দেখুন।

নিম্নলিখিত উদাহরণটি পাঁচটি ক্লিকযোগ্য, ফোকাসযোগ্য মার্কার সহ একটি মানচিত্র দেখায় যা শিরোনাম পাঠ্য অন্তর্ভুক্ত করে এবং 1.5x স্কেলে সেট করা হয়েছে:

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

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

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

এই বিভাগটি আপনাকে দেখায় কিভাবে মার্কারদের ক্লিক ইভেন্টে প্রতিক্রিয়া জানাতে হয়। একটি মার্কার ক্লিকযোগ্য করতে:

• gmpClickable প্রপার্টি true সেট করুন।

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

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

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

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

• ব্যবহারকারীর ইনপুটে প্রতিক্রিয়া জানাতে একটি ক্লিক ইভেন্ট লিসেনার যোগ করুন।

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

// 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);
});
index.ts

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

// 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);
});
index.js

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

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

অ্যাক্সেসযোগ্যতা আরও উন্নত করতে:

• AdvancedMarkerElement.title বিকল্প ব্যবহার করে একটি মার্কারের জন্য বর্ণনামূলক পাঠ্য সেট করুন।
• PinElement এর scale সম্পত্তি ব্যবহার করে মার্কার স্কেল বাড়ান।

সম্পূর্ণ উদাহরণ কোড

সম্পূর্ণ উদাহরণ সোর্স কোড দেখুন

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

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}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            map,
            title: `${i + 1}. ${title}`,
            content: pin.element,
            gmpClickable: true,
        });
        // 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

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

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}`,
      scale: 1.5,
    });
    const marker = new AdvancedMarkerElement({
      position,
      map,
      title: `${i + 1}. ${title}`,
      content: pin.element,
      gmpClickable: true,
    });

    // 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

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত হয়েছে।

সিএসএস

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

এইচটিএমএল

<html>
  <head>
    <title>Advanced Marker Accessibility</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল