উন্নত স্থান তালিকা এলিমেন্ট (প্রিভিউ)

AdvancedPlaceListElement হল একটি HTML এলিমেন্ট যা সেগুলির প্লেস রিসোর্স নামের ভিত্তিতে একটি তালিকায় জায়গার সংগ্রহ রেন্ডার করে।

অ্যাডভান্সড প্লেস লিস্ট এলিমেন্ট উন্নত ফিচার অফার করে, যার মধ্যে রয়েছে অ্যাকশন বোতাম কাস্টমাইজ করা, প্লেস অ্যাট্রিবিউশন কনফিগার করা এবং সমস্যার সমাধান করা।

প্রাথমিক ব্যবহার

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

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

TypeScript

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();

CSS

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

HTML

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

জায়গার অ্যাট্রিবিউশন কনফিগার করা

ভিজ্যুয়াল অ্যাট্রিবিউশন কনফিগার করতে, Maps API ডেটা অ্যাট্রিবিউশন কনফিগারেশন, যেমন কোনও ফটো বা রিভিউয়ের সোর্স দেখানোর জন্য <gmp-place-attribution> এলিমেন্ট যোগ করুন। এটি অবশ্যই <template>-এর সরাসরি চাইল্ড হিসেবে যোগ করতে হবে। <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);
});