স্থান অনুসন্ধান উপাদান এবং মানচিত্র JavaScript API সহ স্থানগুলি আবিষ্কার করুন৷

উদ্দেশ্য

ব্যবহারকারীদের কাছের অনুসন্ধান বা পাঠ্য অনুসন্ধান ব্যবহার করে স্থানগুলি খুঁজে পেতে সাহায্য করার জন্য Google মানচিত্রের সাথে স্থান অনুসন্ধান উপাদানকে কীভাবে একীভূত করতে হয় তা শিখুন, তাদের আগ্রহের পয়েন্টগুলি অন্বেষণ করার ক্ষমতা বৃদ্ধি করে৷ আপনার অ্যাপ্লিকেশানে প্রদর্শিত স্থানগুলি সম্পর্কে আরও বিশদ প্রদান করতে স্থানের বিবরণ কমপ্যাক্ট উপাদান ব্যবহার করুন৷

স্থান অনুসন্ধান উপাদান কি?

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

স্থান আবিষ্কার কল্পনা করুন

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

ইমেজ

স্থান আবিষ্কারের জন্য কেস ব্যবহার করুন

স্থান অনুসন্ধান উপাদান একত্রিত করা বিভিন্ন শিল্প জুড়ে বিভিন্ন অ্যাপ্লিকেশন উন্নত করতে পারে:

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

সমাধান কর্মপ্রবাহ: স্থান আবিষ্কার বাস্তবায়ন

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

পূর্বশর্ত

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

আপনার প্রকল্পে Maps JavaScript API এবং Places UI Kit সক্ষম করুন৷

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

পৃষ্ঠায় একটি মানচিত্র যোগ করুন

প্রথম ধাপ হল আপনার পৃষ্ঠায় একটি মানচিত্র যোগ করা। এই মানচিত্রটি নির্বাচনযোগ্য পিন হিসাবে স্থান অনুসন্ধান উপাদান ফলাফল প্রদর্শন করতে ব্যবহার করা হবে।

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

  1. একটি gmp-map HTML ওয়েব উপাদান ব্যবহার করে।
  2. জাভাস্ক্রিপ্ট ব্যবহার করে।

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

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

আপনি যদি একটি নির্দিষ্ট অবস্থানের আশেপাশের স্থানগুলিকে ভিজ্যুয়ালাইজ করেন, যেমন একটি হোটেল, তাহলে এই স্থানটিকে উপস্থাপন করতে মানচিত্রে একটি মার্কার রাখুন ৷ যেমন:

ইমেজ

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

স্থান অনুসন্ধান উপাদান সেট আপ করুন

এখন, আমরা স্থান অনুসন্ধান উপাদান প্রদর্শন করতে HTML এবং CSS সেট আপ করতে পারি। এই উদাহরণের জন্য, আমরা মানচিত্রের বাম দিকে উপাদানটিকে ভাসতে যাচ্ছি, তবে আপনার অ্যাপ্লিকেশনের জন্য বিভিন্ন লেআউট চেষ্টা করার পরামর্শ দেওয়া হচ্ছে।

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

আপনার 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'];

এই পর্যায়ে অ্যাপ্লিকেশনটি কীভাবে দেখতে পারে তার একটি উদাহরণ নিম্নরূপ:

ইমেজ

স্থান অনুসন্ধান উপাদান দুটি অনুসন্ধান বিকল্পের অনুমতি দেয়:

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

এই বিভাগে উভয় পদ্ধতির বাস্তবায়ন বর্ণনা করে।

ইমেজ

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

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

আপনার HTML-এর ভিতরে একটি <gmp-place-nearby-search-request> নেস্ট করা সহ <gmp-place-search> উপাদান থাকা উচিত।

<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 ইভেন্টের জন্য একটি জাভাস্ক্রিপ্ট লিসেনার তৈরি করুন। ইভেন্ট হ্যান্ডলার ব্যবহারকারীর ইনপুট নেবে এবং অনুসন্ধানটি সম্পাদন করতে <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 ফলাফলের সংখ্যা সীমিত করে।

প্রদর্শন স্থান পিন এবং বিবরণ

এখন অ্যাপ্লিকেশনটি একটি স্থান অনুসন্ধান করতে পারে এবং উপাদানটি পূরণ করতে পারে। পরবর্তী ধাপে আমরা এর কার্যকারিতা বাড়াব:

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

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

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

let markers = {};

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

  • মানচিত্র থেকে যেকোনো বিদ্যমান স্থান চিহ্নিতকারী সরান।
  • স্থান অনুসন্ধান উপাদান থেকে ফলাফলগুলি লুপ করুন এবং প্রতিটির জন্য একটি মার্কার যুক্ত করুন৷
  • মানচিত্রের সীমাগুলি সামঞ্জস্য করুন যাতে সমস্ত নতুন মার্কার দৃশ্যমান হয়৷

অনুসন্ধানের ফলাফল পাওয়া গেলে শোনার জন্য, <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);
    }
}

একবার এই ধাপটি সম্পন্ন হলে, প্লেস সার্চ এলিমেন্ট দ্বারা প্রত্যাবর্তিত প্রতিটি স্থানের জন্য মার্কার দেখানোর ক্ষমতা সহ অ্যাপ্লিকেশনটি নিচের মত দেখাবে:

ইমেজ

এখন যেহেতু আমাদের মানচিত্রে চিহ্নিতকারী রয়েছে, শেষ পদক্ষেপটি হল স্থানের বিশদ বিবরণ সহ একটি তথ্য উইন্ডো দেখানোর জন্য মার্কার এবং উপাদান ক্লিক ইভেন্টগুলি পরিচালনা করা, যা স্থানের বিবরণ উপাদান দ্বারা সরবরাহ করা হয়েছে। এই উদাহরণের জন্য, আমরা Place Details Compact Element ব্যবহার করব।

আপনার কোডে স্থানের বিবরণ কমপ্যাক্ট এলিমেন্ট 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 কল করার পরে জাভাস্ক্রিপ্ট কোডে নিম্নলিখিতটি যোগ করুন। 

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

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

অ্যাপ্লিকেশন নিম্নলিখিত মত দেখাবে:

ইমেজ

উপসংহার

স্থানের বিবরণ কমপ্যাক্ট এলিমেন্টের সাথে মিলিত স্থান অনুসন্ধান উপাদানটি আপনার Google মানচিত্র প্ল্যাটফর্ম অ্যাপ্লিকেশনগুলিতে সমৃদ্ধ স্থান আবিষ্কার বৈশিষ্ট্যগুলি যোগ করার একটি সুগম উপায় প্রদান করে৷

আপনার ব্যবহারকারীদের কাছাকাছি এবং পাঠ্য অনুসন্ধান উভয় ব্যবহার করে স্থানগুলি খুঁজে বের করতে এবং অন্বেষণ করতে এবং সমৃদ্ধ স্থানের বিশদ প্রদর্শন করতে, আপনার স্থান আবিষ্কারের ব্যবহারের ক্ষেত্রে তাদের মিথস্ক্রিয়া বাড়াতে আজই প্লেসেস UI কিট ব্যবহার করে দেখুন৷

অবদানকারী

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