স্থানগুলি UI কিট : একটি রেডি-টু-ব্যবহারের লাইব্রেরি যা কাস্টমাইজেশন এবং কম-কোড বিকাশের জন্য জায়গা প্রদান করে। এটি ব্যবহার করে দেখুন, এবং আপনার UI কিট অভিজ্ঞতাতে আপনার ইনপুট শেয়ার করুন।

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

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

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

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

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

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

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

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

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

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

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

const pin = new PinElement({
    //@ts-ignore
    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

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

const pin = new PinElement({
    //@ts-ignore
    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

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

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

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

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

// 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 প্রপার্টি ব্যবহার করে মার্কারের স্কেল বৃদ্ধি করুন।

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

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

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

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

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;

    // 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({
            //@ts-ignore
            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.addListener('click', ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    });
}

initMap();index.ts

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

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement, PinElement } = (await 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({
            //@ts-ignore
            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.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>

        <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly", internalUsageAttributionIds: "gmp_git_jsapisamples_v1_advanced-markers" });</script>
    </head>
    <body>
        <gmp-map
            zoom="12"
            center="34.84555,-111.8035"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>index.html

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

JSFiddle.net