উন্নত স্থান তালিকার উপাদান (পূর্বরূপ)

AdvancedPlaceListElement হলো একটি HTML এলিমেন্ট যা স্থানসমূহের Place Resource Name-এর উপর ভিত্তি করে একটি তালিকার আকারে স্থানসমূহকে রেন্ডার করে।

অ্যাডভান্সড প্লেস লিস্ট এলিমেন্টটি উন্নত বৈশিষ্ট্য প্রদান করে, যার মধ্যে রয়েছে অ্যাকশন বাটন কাস্টমাইজ করা, স্থানের উৎস নির্ধারণ (প্লেস অ্যাট্রিবিউশন) কনফিগার করা এবং ত্রুটি পরিচালনা করা।

মৌলিক ব্যবহার

কম্পোনেন্টটি ব্যবহার করতে, আপনার পেজে একটি <gmp-advanced-place-list> এলিমেন্ট যোগ করুন এবং places অ্যাট্রিবিউটের মাধ্যমে স্পেস দিয়ে আলাদা করা স্থানের নামগুলোর একটি তালিকা পাস করুন।

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

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

async function init() {
    await google.maps.importLibrary('places');
    await customElements.whenDefined('gmp-advanced-place-list');
    const listElement = document.querySelector('gmp-advanced-place-list');

    if (listElement) {
        listElement.addEventListener('gmp-error', (e: Event) => {
            const customEvent = e as CustomEvent<{ errors?: unknown }>;
            console.error(
                'Failed to load places: ',
                customEvent.detail.errors ?? customEvent
            );
        });
    }
}

void init();

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

async function init() {
    await google.maps.importLibrary('places');
    await customElements.whenDefined('gmp-advanced-place-list');
    const listElement = document.querySelector('gmp-advanced-place-list');

    if (listElement) {
        listElement.addEventListener('gmp-error', (e) => {
            const customEvent = e;
            console.error(
                'Failed to load places: ',
                customEvent.detail.errors ?? customEvent
            );
        });
    }
}

void init();

সিএসএস 

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Roboto, Arial, sans-serif;
}

এইচটিএমএল 

<!doctype html>
<html>
    <head>
        <title>Advanced Place List</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <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",
                v: "beta"
            });
        </script>
    </head>
    <body>
        <gmp-advanced-place-list
            places="places/ChIJLU7jZClu5kcR4PcOOO6p3I0 places/ChIJrRMgU7ZhLxMRxAOFkC7I8Sg places/ChIJbf8C1yFxdDkR3n12P4DkKt0 places/ChIJPTacEpBQwokRKwIlDXelxkA places/ChIJVVVViV-abZERJxqgpA43EDo">
            <template slot="details-item">
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-media query="coffee"></gmp-place-media>
            </template>
        </gmp-advanced-place-list>
    </body>
</html>

উন্নত বৈশিষ্ট্য

অ্যাকশন বাটনগুলি কাস্টমাইজ করুন

অ্যাডভান্সড প্লেস লিস্ট কম্পোনেন্টের <template slot="details-item"> এলিমেন্টের ভিতরে অ্যাকশন বাটনগুলোকে চাইল্ড হিসেবে যোগ করুন। সাধারণ নেভিগেশনাল সংযোগের জন্য <gmp-place-link> ব্যবহার করুন এবং স্পষ্টভাবে action অ্যাট্রিবিউটটি উল্লেখ করুন। আপনি ঐচ্ছিকভাবে slot অ্যাট্রিবিউটটিও উল্লেখ করতে পারেন। বৈধ পূর্বনির্ধারিত অ্যাকশনগুলো হলো open-website , open-directions , open-map এবং call । যদি slot অ্যাট্রিবিউটটি বাদ দেওয়া হয়, তবে এটি ডিফল্টভাবে action-main হিসেবে ব্যবহৃত হবে।

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="details-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-list>

স্থান অ্যাট্রিবিউশন কনফিগার করুন

ভিজ্যুয়াল অ্যাট্রিবিউশন কনফিগার করতে, একটি <gmp-place-attribution> এলিমেন্ট যোগ করুন যা ম্যাপস এপিআই ডেটা অ্যাট্রিবিউশনের সামগ্রিক কনফিগারেশন, যেমন কোনো ছবি বা পর্যালোচনার উৎস, প্রদর্শন করবে। এটিকে অবশ্যই <template> এর সরাসরি সিibling (সহযোগী) হিসেবে যোগ করতে হবে। <template> এলিমেন্টের ভিতরে রাখা অ্যাট্রিবিউশনগুলো উপেক্ষা করা হবে।

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="details-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-list>

ত্রুটিগুলি পরিচালনা করুন

যখন এক বা একাধিক অনুরোধ করা স্থান লোড হতে ব্যর্থ হয়, তখন সেই পরিস্থিতি সুন্দরভাবে সামাল দেওয়ার জন্য আপনি gmp-error ইভেন্টটি শুনতে পারেন।

const listElement = document.querySelector('gmp-advanced-place-list');
listElement.addEventListener('gmp-error', (e) => {
  // e.detail.errors contains an array of failure objects with specific failed Resource Names
  console.error('Failed to load places: ', e.detail.errors);
});