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

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

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

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

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

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

async function init() {
    const [
        { Map3DElement, Marker3DInteractiveElement, PopoverElement },
        { PinElement },
    ] = await Promise.all([
        google.maps.importLibrary('maps3d'),
        google.maps.importLibrary('marker'),
    ]);

    const map = new Map3DElement({
        center: { lat: 34.8405, lng: -111.7909, altitude: 1322.7 },
        range: 13279.5,
        tilt: 67.44,
        heading: 0.01,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    // 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',
        },
    ];

    tourStops.forEach(({ position, title }, i) => {
        const pin = new PinElement({
            glyphText: `${i + 1}`,
            scale: 1.5,
            glyphColor: '#FFFFFF',
        });
        const popover = new PopoverElement();

        const content = `${i + 1}. ${title}`;
        const header = document.createElement('span');
        // Include the label for screen readers.
        header.ariaLabel = `This is marker ${i + 1}. ${title}`;
        header.slot = 'header';

        popover.append(header);
        popover.append(content);

        const interactiveMarker = new Marker3DInteractiveElement({
            // Include a title, used for accessibility text for use by screen readers.
            title,
            position,
            gmpPopoverTargetElement: popover,
        });

        interactiveMarker.append(pin);

        map.append(interactiveMarker);
        map.append(popover);
    });

    document.body.append(map);
}

void init();

সিএসএস 

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
html,
map {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

এইচটিএমএল 

<html>
    <head>
        <title>Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

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

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

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

প্রবেশগম্যতা বাড়াতে:

  • Marker3DInteractiveElement.title অপশন ব্যবহার করে একটি মার্কারের জন্য বর্ণনামূলক টেক্সট সেট করুন।
  • PopoverElement এর header স্লটে কন্টেন্ট যোগ করুন।
  • PinElement.scale প্রপার্টি ব্যবহার করে মার্কারের স্কেল বৃদ্ধি করুন।