মার্কার ক্লিকযোগ্য ও অ্যাক্সেসযোগ্য করে তোলা

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

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

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

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

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

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

মার্কার ক্লিকেবল করা

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

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

TypeScript

const pin = new PinElement({
    glyphText: `${i + 1}`,
    scale: 1.5,
});
const marker = new AdvancedMarkerElement({
    position,
    title: `${i + 1}. ${title}`,
    gmpClickable: true,
});
marker.append(pin);
mapElement.append(marker);
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

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

const pin = new PinElement({
    glyphText: `${i + 1}`,
    scale: 1.5,
});
const marker = new AdvancedMarkerElement({
    position,
    title: `${i + 1}. ${title}`,
    gmpClickable: true,
});
marker.append(pin);
mapElement.append(marker);
index.js

• ব্যবহারকারীর ইনপুটের উত্তর দিতে gmp-click ইভেন্ট লিসনার যোগ করুন।

TypeScript

// Add a click listener for each marker, and set up the info window.
marker.addEventListener('gmp-click', () => {
    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.addEventListener('gmp-click', () => {
    infoWindow.close();
    infoWindow.setContent(marker.title);
    infoWindow.open(marker.map, marker);
});
index.js

• কোনও মার্কারকে আবার ক্লিক করা যায় এমন করে তুলতে:

  • gmp-click ইভেন্ট লিসনার সরাতে removeEventListener-এ কল করুন:

  // Remove the listener.
  marker.removeEventListener('gmp-click', clickListener);
  

  • অথবা বিকল্প হিসেবে, gmpClickable প্রপার্টিকে false হিসেবে সেট করুন।

অ্যাক্সেসিবিলিটি আরও উন্নত করতে:

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

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

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

TypeScript

const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    // 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({
            glyphText: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            title: `${i + 1}. ${title}`,
            gmpClickable: true,
        });
        marker.append(pin);
        mapElement.append(marker);
        // Add a click listener for each marker, and set up the info window.
        marker.addEventListener('gmp-click', () => {
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

void init();
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

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

const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    // 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({
            glyphText: `${i + 1}`,
            scale: 1.5,
        });
        const marker = new AdvancedMarkerElement({
            position,
            title: `${i + 1}. ${title}`,
            gmpClickable: true,
        });
        marker.append(pin);
        mapElement.append(marker);
        // Add a click listener for each marker, and set up the info window.
        marker.addEventListener('gmp-click', () => {
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

void init();
index.js

CSS

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

<html>
    <head>
        <title>Advanced Marker Accessibility</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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            zoom="12"
            center="34.84555,-111.8035"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>
index.html