উন্নত স্থান অনুসন্ধান উপাদান (পূর্বরূপ)

AdvancedPlaceSearchElement হলো একটি HTML এলিমেন্ট যা কোনো স্থান অনুসন্ধানের ফলাফল একটি তালিকায় প্রদর্শন করে। gmp-advanced-place-search এলিমেন্টটি কনফিগার করার দুটি উপায় রয়েছে:

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

কাছাকাছি অনুসন্ধান অনুরোধ

সেই স্থানের ধরনের জন্য কাছাকাছি অনুসন্ধানের ফলাফল দেখতে মেনু থেকে স্থানের ধরন নির্বাচন করুন।

নিকটবর্তী অনুসন্ধানটি মূলত স্থানের ধরণ এবং অবস্থান অনুসারে অনুসন্ধান করার জন্য কনফিগার করা হয়েছে, এবং rankPreference প্রপার্টি ব্যবহার করে ফলাফলগুলোকে দূরত্ব বা জনপ্রিয়তা অনুসারে র‍্যাঙ্ক করা যেতে পারে। আরও বিস্তারিত জানতে PlaceNearbySearchRequestElement ক্লাস রেফারেন্স ডকুমেন্টেশন দেখুন।

এই উদাহরণটি ব্যবহারকারীর নির্বাচিত স্থানের ধরন দিয়ে নিকটবর্তী অনুসন্ধানের প্রতিক্রিয়ায় অ্যাডভান্সড প্লেস সার্চ এলিমেন্টটি রেন্ডার করে। এটি নির্বাচিত স্থানটির জন্য একটি অ্যাডভান্সডপ্লেসডিটেলসকমপ্যাক্টএলিমেন্টও প্রদর্শন করে।

ম্যাপে অ্যাডভান্সড প্লেস সার্চ এলিমেন্ট যোগ করতে, HTML পেজে একটি gmp-advanced-place-search এলিমেন্টের ভেতরে একটি নেস্টেড gmp-place-nearby-search-request এলিমেন্ট যোগ করুন।

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

select এলিমেন্টটি ব্যবহারকারীকে মেনু থেকে স্থানের ধরন বেছে নেওয়ার সুযোগ দেয়। সরলতার জন্য, এখানে কেবল তিন ধরনের স্থান তালিকাভুক্ত করা হয়েছে: রেস্তোরাঁ, ক্যাফে এবং ইভি চার্জিং স্টেশন।

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

যখন ব্যবহারকারী মেনু থেকে কোনো স্থানের ধরন নির্বাচন করেন, তখন gmp-place-nearby-search-request এলিমেন্টটি আপডেট হয় এবং Advanced Place Search এলিমেন্টটি ফলাফলগুলো প্রদর্শন করে।

টেক্সট অনুরোধ দ্বারা অনুসন্ধান করুন

ইনপুট ফিল্ডে একটি সার্চ টার্ম লিখে সার্চ বাটনে ক্লিক করলে, সেই টার্মের সাথে মেলে এমন স্থানগুলির একটি তালিকা পাওয়া যাবে।

টেক্সট সার্চটি মূলত একটি টেক্সট কোয়েরি এবং অবস্থান ব্যবহার করে অনুসন্ধান করার জন্য কনফিগার করা হয়েছে, এবং মূল্যস্তর, রেটিং, ও বর্তমানে খোলা আছে কিনা তার উপর ভিত্তি করে ফলাফল পরিমার্জন করা যায়। rankPreference প্রপার্টি ব্যবহার করে দূরত্ব বা জনপ্রিয়তা অনুসারেও ফলাফলকে র‍্যাঙ্ক করা যেতে পারে। আরও বিস্তারিত জানতে PlaceTextSearchRequestElement ক্লাস রেফারেন্স ডকুমেন্টেশন দেখুন।

এই উদাহরণটি ব্যবহারকারীর টেক্সট ইনপুটের প্রতিক্রিয়ায় অ্যাডভান্সড প্লেস সার্চ এলিমেন্টটি রেন্ডার করে। এটি নির্বাচিত স্থানটির জন্য একটি অ্যাডভান্সডপ্লেসডিটেলসকমপ্যাক্টএলিমেন্টও প্রদর্শন করে।

ম্যাপে অ্যাডভান্সড প্লেস সার্চ এলিমেন্ট যোগ করতে, HTML পেজে একটি gmp-advanced-place-search এলিমেন্টের ভেতরে একটি নেস্টেড gmp-place-text-search-request এলিমেন্ট যোগ করুন।

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

input এলিমেন্টটি ব্যবহারকারীকে অনুসন্ধানের জন্য টেক্সট প্রবেশ করানোর সুযোগ দেয়।

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

যখন ব্যবহারকারী সার্চ বোতামে ক্লিক করেন, তখন সার্চ ফাংশনটি চালু হয়, gmp-place-text-search-request এলিমেন্টটি আপডেট হয় এবং অ্যাডভান্সড প্লেস সার্চ এলিমেন্টটি ফলাফলগুলো প্রদর্শন করে।

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

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

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

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-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-search>

পর্যালোচনা এবং মিডিয়া ফিল্টার করুন

এই কোড নমুনাটি শুধুমাত্র সেইসব মিডিয়া এবং রিভিউ দেখায় যেগুলিতে 'কফি'র উল্লেখ আছে।

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

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

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

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-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-search>

স্থান নির্বাচন এবং ত্রুটিগুলি পরিচালনা করুন

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

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});