PlaceSearchElement-এর মাধ্যমে জায়গা খোঁজা

উদ্দেশ্য

ব্যবহারকারীদের সাহায্য করার জন্য Google Maps-এর সাথে কীভাবে PlaceSearchElement ইন্টিগ্রেট করবেন তা জানুন যাতে তারা আশেপাশের সার্চ বা টেক্সট সার্চ ব্যবহার করে জায়গা খুঁজে পেতে পারেন, যা তাদের আগ্রহের জায়গা এক্সপ্লোর করার ক্ষমতাকে উন্নত করে। আপনার অ্যাপ্লিকেশনে দেখানো জায়গা সম্পর্কে আরও বিবরণ দিতে জায়গার বিবরণ কম্প্যাক্ট এলিমেন্ট ব্যবহার করুন।

PlaceSearchElement কী?

PlaceSearchElement হল Maps JavaScript API-তে Places UI Kit-এর অংশ। এটি একটি HTML এলিমেন্ট যা আপনার অ্যাপ্লিকেশনের মধ্যে সরাসরি একটি তালিকা ফরম্যাটে কোনও জায়গা সার্চ করার ফলাফল রেন্ডার করে। এই এলিমেন্ট নিয়ারবাই Search বা টেক্সট সার্চ ব্যবহার করে খুঁজে পাওয়া জায়গা দেখানোর প্রসেসকে সহজ করে তোলে, যার ফলে জায়গা খোঁজার ক্ষেত্রে ব্যবহারকারীকে বাধাহীন অভিজ্ঞতা প্রদান করা যায়। কোনও ব্যবহারকারী তালিকা থেকে কোনও জায়গা বেছে নিলে, আপনি ম্যাপে সেটির বিবরণ দেখাতে পারবেন, প্রায়শই তথ্য উইন্ডো এবং জায়গার বিবরণ এলিমেন্ট ব্যবহার করে।

জায়গা খোঁজার অভিজ্ঞতা ভিজ্যুয়ালাইজ করুন

নিচের ছবিতে PlaceSearchElement-এর একটি উদাহরণ দেখানো হয়েছে। বাঁদিকে, রেস্তোরাঁর একটি তালিকা দেখানো হয়েছে (PlaceSearchElement)। কোনও রেস্তোরাঁ বেছে নেওয়া হলে, ম্যাপের তথ্য উইন্ডোতে সেটির বিবরণ দেখানো হয় এবং ম্যাপে সেটির লোকেশন কেন্দ্রে দেখানো হয়।

জায়গা খোঁজার জন্য ব্যবহারের ক্ষেত্র

PlaceSearchElement ইন্টিগ্রেট করলে বিভিন্ন ইন্ডাস্ট্রির বিভিন্ন অ্যাপ্লিকেশন উন্নত করা যেতে পারে:

• ভ্রমণ ও পর্যটন: পর্যটকদের কোনও এলাকার আকর্ষণীয় স্থান, হোটেল বা নির্দিষ্ট ধরনের খাবার সার্চ করার অনুমতি দিন।
• রিয়েল এস্টেট: সম্ভাব্য ক্রেতা বা ভাড়াটেদের কাছাকাছি স্কুল, সুপারমার্কেট বা পাবলিক ট্রান্সপোর্টের বিকল্প খুঁজে পেতে সাহায্য করুন।
• লজিস্টিক ও পরিষেবা: EV চার্জিং স্টেশন, গ্যাস স্টেশন বা নির্দিষ্ট পরিষেবা কেন্দ্র খুঁজে পেতে ড্রাইভারদের সাহায্য করুন।

সমাধানের ওয়ার্কফ্লো: জায়গা খোঁজার সুবিধা প্রয়োগ করা

এই বিভাগটি আপনাকে ম্যাপে জায়গা খোঁজার জন্য PlaceSearchElement ইন্টিগ্রেট করার মাধ্যমে গাইড করে এবং এতে Places UI Kit-এর সাথে ইন্টার‍্যাক্ট করার জন্য কোড স্নিপেট অন্তর্ভুক্ত থাকে। কীভাবে ম্যাপ শুরু করবেন এবং নিয়ারবাই সার্চ ও টেক্সট সার্চ, উভয়ই প্রয়োগ করবেন তা জানুন। সবশেষে, ম্যাপে কোনও জায়গার পিনে ব্যবহারকারী ক্লিক করলে, সেই জায়গা সম্পর্কে আরও বিবরণ দেখাতে 'জায়গার বিবরণ' এলিমেন্ট ব্যবহার করুন।

পূর্বশর্ত

নিম্নলিখিত ডকুমেন্টেশন সম্পর্কে জানা থাকলে ভালো হয়:

• PlaceSearchElement - নিয়ারবাই Search বা টেক্সট সার্চ ব্যবহার করে জায়গা দেখানোর জন্য ব্যবহার করা হয়
• জায়গার বিবরণ এলিমেন্ট - কোনও একটি জায়গার বিবরণ দেখানোর জন্য ব্যবহার করা হয়
• Maps JavaScript API - আপনার পৃষ্ঠায় ম্যাপ দেখাতে এবং Places UI Kit ইমপোর্ট করতে ব্যবহার করা হয়

আপনার প্রোজেক্টে Maps JavaScript API এবং Places UI Kit চালু করুন।

শুরু করার আগে Maps JavaScript API লোড করেছেন এবং প্রয়োজনীয় লাইব্রেরি ইমপোর্ট করেছেন কিনা তা যাচাই করুন। এই ডকুমেন্টটি HTML, CSS এবং JavaScript সহ ওয়েব ডেভেলপমেন্টের কার্যকরী জ্ঞানও অনুমান করে।

পৃষ্ঠায় ম্যাপ যোগ করুন

প্রথম ধাপ হল আপনার পৃষ্ঠায় ম্যাপ যোগ করা। এই ম্যাপটি PlaceSearchElement ফলাফলকে বেছে নেওয়া যায় এমন পিন হিসেবে দেখানোর জন্য ব্যবহার করা হবে।

কোনও পৃষ্ঠায় ম্যাপ যোগ করার দুটি উপায় আছে:

1. gmp-map HTML ওয়েব কম্পোনেন্ট ব্যবহার করে।
2. JavaScript ব্যবহার করে।

এই পৃষ্ঠার কোড স্নিপেটগুলি একটি JavaScript ম্যাপ ব্যবহার করে তৈরি করা হয়েছে।

ম্যাপটি এমন কোনও লোকেশনের কেন্দ্রবিন্দুতে থাকতে পারে যার আশেপাশে আপনি ব্যবহারকারীকে সার্চ করতে বলতে চান, যেমন কোনও হোটেল, অথবা ম্যাপটিকে কেন্দ্রবিন্দুতে রাখার জন্য ব্যবহারকারীর বর্তমান লোকেশন জিজ্ঞাসা করার জন্য শুরু করা যেতে পারে। এই ডকুমেন্টের উদ্দেশ্যে, সার্চ অ্যাঙ্কর করার জন্য আমরা একটি নির্দিষ্ট লোকেশন ব্যবহার করব।

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

ম্যাপের কেন্দ্রে সান ফ্রান্সিসকো রয়েছে এবং আমরা কাছাকাছি যে জায়গা খুঁজছি তা নীল পিন দিয়ে চিহ্নিত করা হয়েছে। PinElement ব্যবহার করে পিনের রঙ কাস্টমাইজ করা হয়েছে। UI থেকে ম্যাপ টাইপ কন্ট্রোল লুকিয়ে দেওয়া হয়েছে।

PlaceSearchElement সেট-আপ করুন

এখন, PlaceSearchElement দেখানোর জন্য HTML এবং CSS সেট-আপ করুন। এই উদাহরণটি ম্যাপের বাঁদিকে এলিমেন্টটি ফ্লোট করে, তবে আপনি নিজের অ্যাপ্লিকেশনের সাথে মানানসই বিভিন্ন লেআউট ব্যবহার করে দেখতে পারেন।

PlaceSearchElement-এ ডিক্লারেটিভ পদ্ধতি ব্যবহার করা হয়। জাভাস্ক্রিপ্টে এটি সম্পূর্ণভাবে কনফিগার করার পরিবর্তে, আপনি সরাসরি আপনার HTML-এ সার্চের ধরন নির্ধারণ করেন। এটি করার জন্য, আপনি প্রধান <gmp-place-search> কম্পোনেন্টের মধ্যে <gmp-place-nearby-search-request>-এর মতো একটি অনুরোধ এলিমেন্ট নেস্ট করেন।

আপনার HTML কোডের মধ্যে, একটি <gmp-place-search> এলিমেন্ট শুরু করুন। ফলাফলে ক্লিক ইভেন্ট চালু করতে selectable অ্যাট্রিবিউট ব্যবহার করুন। এর মধ্যে, একটি <gmp-place-nearby-search-request> যোগ করুন যাতে নির্দিষ্ট করা যায় যে এই এলিমেন্টটি আশেপাশে সার্চ করার জন্য ব্যবহার করা হবে।

<gmp-place-search selectable>
  <gmp-place-nearby-search-request>
  </gmp-place-nearby-search-request>
</gmp-place-search>

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

এর জন্য কোড স্নিপেট নিচে দেওয়া হল:

// Get references to the Place Search and its nested request element
const placeSearchElement = document.querySelector("gmp-place-search");
const placeSearchRequestElement = document.querySelector("gmp-place-nearby-search-request");

// Define the location restriction for the search
const circleRestriction = new Circle({
    center: marker.position,
    radius: 500
});

// Set the properties on the request element to perform an initial search for restaurants.
placeSearchRequestElement.locationRestriction = circleRestriction;
placeSearchRequestElement.includedPrimaryTypes = ['restaurant'];

এই পর্যায়ে আবেদনটি কেমন দেখতে হতে পারে তার একটি উদাহরণ নিচে দেওয়া হল:

ব্যবহারকারীকে সার্চ করার অনুমতি দিন

PlaceSearchElement-এ দুটি সার্চের বিকল্প আছে:

• <gmp-place-nearby-search-request> - জায়গার ধরন ব্যবহার করে, Places Nearby Search থেকে সার্চ ফলাফল রেন্ডার করুন।
• <gmp-place-text-search-request> - "Sushi in San Francisco"-এর মতো ফ্রি টেক্সট ইনপুট ব্যবহার করে, Places Text Search থেকে সার্চ ফলাফল রেন্ডার করুন।

এগুলি হল <gmp-place-search>-এর মধ্যে নেস্ট করা এলিমেন্ট। তারপর আপনি জাভাস্ক্রিপ্ট ব্যবহার করে নেস্ট করা অনুরোধ এলিমেন্টে প্রপার্টি সেট করার মাধ্যমে সার্চ ট্রিগার করেন।

এই বিভাগে দুটি পদ্ধতিই প্রয়োগ করার ব্যাপারে বর্ণনা করা হয়েছে।

আশেপাশে সার্চ করুন

ব্যবহারকারীদের কাছাকাছি সার্চ করার অনুমতি দিতে, প্রথমে আপনাকে তাদের জন্য একটি UI এলিমেন্ট তৈরি করতে হবে যাতে তারা একটি জায়গার ধরন বেছে নিতে পারে। আপনার অ্যাপ্লিকেশনের জন্য সবচেয়ে ভালো কাজ করে এমন বেছে নেওয়ার পদ্ধতি বেছে নিন, যেমন, জায়গার ধরন বেছে নেওয়ার মাধ্যমে তৈরি করা ড্রপ-ডাউন তালিকা।

আপনার ব্যবহারের ক্ষেত্রে প্রাসঙ্গিক এমন ধরনের সাবসেট বেছে নেওয়ার জন্য সাজেস্ট করা হয়। যেমন, আপনি যদি কোনও হোটেলের আশেপাশে কী আছে তা পর্যটকদের দেখানোর জন্য কোনও অ্যাপ্লিকেশন ডেভেলপ করেন, তাহলে আপনি বেছে নিতে পারেন: bakery, coffee_shop, museum, restaurant এবং tourist_attraction।

আপনার HTML-এ <gmp-place-search> এলিমেন্ট থাকতে হবে এবং তার মধ্যে <gmp-place-nearby-search-request> নেস্ট করা থাকতে হবে।

<gmp-place-search selectable>
  <gmp-place-nearby-search-request>
  </gmp-place-nearby-search-request>
</gmp-place-search>

এরপর, আপনার জায়গার ধরন সিলেক্টরে change ইভেন্টের জন্য জাভাস্ক্রিপ্ট লিসেনার তৈরি করুন। এই লিসেনার এমন একটি ফাংশন কল করবে যা <gmp-place-nearby-search-request> এলিমেন্টের প্রপার্টি আপডেট করে, যা অটোমেটিক নতুন সার্চ ট্রিগার করে এবং তালিকা আপডেট করে।

// Get a reference to the nested request element
const placeSearchRequestElement = document.querySelector('gmp-place-nearby-search-request');

// Function to update the place search based on the selected type
function updatePlaceList() {
    const selectedType = placeTypeSelect.value;
    if (!selectedType) {
        // If no type is selected, don't perform a search.
        // You could optionally hide the list or clear previous results here.
        placeSearchElement.style.display = 'none';
        return;
    }
    placeSearchElement.style.display = 'block';

    // Set properties on the request element to trigger a new search
    placeSearchRequestElement.locationRestriction = searchCircle;
    placeSearchRequestElement.maxResultCount = 8;
    placeSearchRequestElement.includedPrimaryTypes = [selectedType];
}

সেট-আপের সময় ব্যবহার করা একই searchCircle, locationRestriction-এর জন্য ব্যবহার করা হয়। ব্যবহারকারীর বেছে নেওয়া বিকল্প থেকে includedPrimaryTypes প্রপার্টি ভ্যালুতে সেট করা হয়েছে। ফলাফলের সংখ্যা সীমিত করতে একটি ঐচ্ছিক maxResultCount-ও সেট করা আছে।

টেক্সট সার্চ

টেক্সট সার্চ চালু করতে, আপনার HTML কনফিগারেশন পরিবর্তন করতে হবে। আশেপাশের সার্চের অনুরোধের পরিবর্তে, আপনি একটি <gmp-place-text-search-request> এলিমেন্ট নেস্ট করেন।

<gmp-place-search selectable>
  <gmp-place-text-search-request>
  </gmp-place-text-search-request>
</gmp-place-search>

আপনার UI-তে টেক্সট ইনপুট ও সার্চ বোতাম যোগ করুন। বোতামের click ইভেন্টের জন্য একটি JavaScript লিসনার তৈরি করুন। ইভেন্ট হ্যান্ডলার ব্যবহারকারীর ইনপুট নেবে এবং সার্চ করার জন্য <gmp-place-text-search-request> এলিমেন্টের প্রপার্টি আপডেট করবে।

// Get a reference to the text search request element
const placeTextSearchRequestElement = document.querySelector('gmp-place-text-search-request');
const textSearchInput = document.getElementById('textSearchInput');
const textSearchButton = document.getElementById('textSearchButton');

textSearchButton.addEventListener('click', performTextSearch);

function performTextSearch() {
    const query = textSearchInput.value.trim();
    if (!query) {
        console.log("Search query is empty.");
        return;
    }
    // Set properties on the request element to trigger a new search
    placeTextSearchRequestElement.textQuery = query;
    placeTextSearchRequestElement.locationBias = map.getBounds();
    placeTextSearchRequestElement.maxResultCount = 8;
}

এখানে, আমরা ব্যবহারকারীর ইনপুট সহ textQuery প্রপার্টি সেট করি। এছাড়াও, আমরা বর্তমান ম্যাপ বাউন্ড ব্যবহার করে একটি locationBias প্রদান করি, যা API-কে সেই এলাকার মধ্যে ফলাফল পছন্দ করতে বলে, তবে ফলাফলগুলি কঠোরভাবে সেই এলাকার মধ্যে সীমাবদ্ধ থাকে না। ঐচ্ছিক maxResultCount, দেখানো ফলাফলের সংখ্যা সীমিত করে।

জায়গার পিন ও বিবরণ দেখান

এখন অ্যাপ্লিকেশনটি জায়গা সার্চ করতে এবং এলিমেন্ট পপুলেট করতে পারে। পরবর্তী ধাপে আমরা এর কার্যকারিতা উন্নত করব:

• PlaceSearchElement-এ প্রতিটি জায়গার জন্য ম্যাপে পিন দেখানো হচ্ছে।
• ব্যবহারকারীকে পিন বা PlaceSearchElement-এর মধ্যে থাকা জায়গায় ক্লিক করার অনুমতি দেওয়া, যাতে সেই নির্দিষ্ট জায়গা সম্পর্কে আরও তথ্য দেখানো যায়।

অ্যাপ্লিকেশনটি নিয়ারবাই সার্চ বা টেক্সট সার্চ ব্যবহার করছে কিনা তা নির্বিশেষে এই ধাপের নীতি একই।

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

let markers = {};

ম্যাপে মার্কার যোগ করার জন্য একটি ফাংশন তৈরি করুন। নতুন সার্চ ফলাফল লোড করা হলে এই ফাংশন কল করা হবে। এটি:

• ম্যাপ থেকে আগে থেকে থাকা যেকোনও জায়গার মার্কার সরিয়ে দিন।
• PlaceSearchElement থেকে পাওয়া ফলাফল লুপ করুন এবং প্রত্যেকটির জন্য মার্কার যোগ করুন।
• ম্যাপের বাউন্ডারি অ্যাডজাস্ট করুন যাতে সব নতুন মার্কার দেখা যায়।

সার্চ ফলাফল কখন উপলভ্য হবে তা জানতে, <gmp-place-search> এলিমেন্টে একটি gmp-load ইভেন্ট লিসেনার যোগ করুন। সার্চ সম্পূর্ণ হওয়ার পরে এবং ফলাফল দেখানোর পরে এই ইভেন্ট ট্রিগার হয়।

আমরা আমাদের সার্চ ফাংশনের (যেমন, updatePlaceList) মধ্যে লিসেনার যোগ করব এবং { once: true } বিকল্প ব্যবহার করে নিশ্চিত করব যে এটি শুধুমাত্র বর্তমান সার্চের ফলাফলের জন্যই কাজ করে।

// In your search function, after setting the request properties:
placeSearchElement.addEventListener('gmp-load', addMarkers, { once: true });

addMarkers ফাংশনটি দেখতে এইরকম:

async function addMarkers() {
    const { LatLngBounds } = await google.maps.importLibrary("core");
    const bounds = new LatLngBounds();

    if (placeSearchElement.places.length > 0) {
        // Remove existing markers
        for (const m in markers) {
            markers[m].map = null;
        }
        markers = {};

        // Loop through each place from the search results
        // and add a marker for each one.
        for (const place of placeSearchElement.places) {
            const marker = new google.maps.marker.AdvancedMarkerElement({
                map: map,
                position: place.location,
            });

            markers[place.id] = marker;
            bounds.extend(place.location);
            marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;

            // Add a click listener for each marker.
            marker.addListener('gmp-click', (event) => {
                // The main logic for showing details will go here.
            });
        }
        // Position the map to display all markers.
        map.setCenter(bounds.getCenter());
        map.fitBounds(bounds);
    }
}

এই ধাপটি সম্পূর্ণ হয়ে গেলে, অ্যাপ্লিকেশনটি নিম্নলিখিতটির মতো দেখাবে, যেখানে PlaceSearchElement-এর মাধ্যমে ফেরত আসা প্রতিটি জায়গার জন্য মার্কার দেখানোর সুবিধা থাকবে:

এখন ম্যাপে মার্কার যোগ করা হয়ে গেছে, শেষ ধাপ হল মার্কার ও এলিমেন্ট ক্লিক ইভেন্ট ম্যানেজ করা যাতে জায়গার বিবরণ এলিমেন্ট-এর মাধ্যমে জায়গার বিবরণ সহ তথ্য উইন্ডো দেখানো যায়। এই উদাহরণের জন্য, আমরা জায়গার বিবরণ কম্প্যাক্ট এলিমেন্ট ব্যবহার করব।

আপনার কোডে জায়গার বিবরণ কম্প্যাক্ট এলিমেন্ট HTML যোগ করুন, যেমন:

<gmp-place-details-compact orientation="vertical" style="display: none;">
    <gmp-place-all-content></gmp-place-all-content>
    <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-details-compact>

style-এর মান display: none-এ সেট করা আছে; এটি প্রয়োজন না হওয়া পর্যন্ত দেখা যাবে না। সব এলিমেন্ট কন্টেন্ট রেন্ডার করার জন্য gmp-place-all-content পাস করা হয়। কোন কন্টেন্ট রেন্ডার করতে হবে তা বেছে নিতে, জায়গার বিবরণ কম্প্যাক্ট এলিমেন্ট ডকুমেন্টেশন দেখুন।

জায়গার বিবরণ কম্প্যাক্ট এলিমেন্টের রেফারেন্স ধরে রাখতে জাভাস্ক্রিপ্টে একটি গ্লোবাল ভেরিয়েবেল তৈরি করুন এবং আপনার ইনিশিয়ালাইজেশন কোডে এটি পপুলেট করুন, যেমন:

let placeDetailsElement;
...
placeDetailsElement = document.querySelector('gmp-place-details-compact');

addMarkers ফাংশনের মধ্যে, প্রতিটি মার্কারের জন্য একটি gmp-click ইভেন্ট লিসেনার যোগ করুন এবং বর্তমান মার্কারের স্থান আইডি পাস করে স্থানের বিবরণ দেখানোর জন্য স্থানের বিবরণ কমপ্যাক্ট এলিমেন্ট কনফিগার করুন।

এটি করা হয়ে গেলে, মার্কারের সাথে অ্যাঙ্কর করা জায়গার বিবরণ কম্প্যাক্ট এলিমেন্ট দেখানোর জন্য একটি তথ্য উইন্ডো খোলা হয়।

অবশেষে, ম্যাপটি বেছে নেওয়া জায়গার ভিউপোর্টে পজিশন করা হয়, যাতে এটি দেখা যায়।

async function addMarkers() {
          ...
            marker.addListener('gmp-click', (event) => {
                //Set up Place Details Compact Widget
                placeDetailsElement.style.display = "block";
                // Remove any existing place request element
                const existingPlaceRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
                if (existingPlaceRequest) {
                    existingPlaceRequest.remove();
                }
                // Create and configure the new place request element
                const placeRequestElement = new google.maps.places.PlaceDetailsPlaceRequestElement({ place: place.id });
                // Prepend the new place request element to the main widget
                placeDetailsElement.prepend(placeRequestElement);
                if (infoWindow.isOpen) {
                    infoWindow.close();
                }
                infoWindow.setOptions({
                    content: placeDetailsElement
                });
                infoWindow.open({
                    anchor: marker,
                    map: map
                });
                // Position the map to show the selected place
                placeDetailsElement.addEventListener('gmp-load', () => {
                    map.fitBounds(place.viewport, { top: 500, left: 400 });
                });
            });
          ...
        });
    }
}

ব্যবহারকারী যাতে 'জায়গার তালিকা এলিমেন্ট'-এ কোনও জায়গায় ক্লিক করে 'জায়গার বিবরণ কম্প্যাক্ট এলিমেন্ট' দেখতে পান, তার জন্য configureFromSearchNearbyRequest-এ কল করার পরে JavaScript কোডে নিম্নলিখিতগুলি যোগ করুন।

placeSearchElement.addEventListener("gmp-select", ({ place }) => {
    if (markers[place.id]) {
        markers[place.id].click();
    }
});

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

আবেদনটি নিম্নলিখিতভাবে দেখানো হবে:

উপসংহার

PlaceSearchElement-এর সাথে জায়গার বিবরণ কম্প্যাক্ট এলিমেন্ট ব্যবহার করলে, আপনার Google Maps Platform অ্যাপ্লিকেশনে সমৃদ্ধ জায়গা খোঁজার ফিচার যোগ করার একটি সহজ উপায় পাওয়া যায়।

আজই Places UI Kit ব্যবহার করে দেখুন যাতে আপনার ব্যবহারকারীরা আশেপাশের জায়গা ও টেক্সট সার্চ, উভয় পদ্ধতি ব্যবহার করে জায়গা খুঁজে পেতে ও এক্সপ্লোর করতে পারেন এবং জায়গার সমৃদ্ধ বিবরণ দেখতে পান। এর ফলে, আপনার জায়গা খোঁজার ব্যবহারের ক্ষেত্রে তাদের ইন্টার‍্যাকশন আরও উন্নত হবে।

অবদানকারী

হেনরিক ভালভ | DevX ইঞ্জিনিয়ার