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

উদ্দেশ্য

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

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

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

স্থান আবিষ্কারের দৃশ্যায়ন করুন

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

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

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

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

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

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

পূর্বশর্ত

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

• স্থান অনুসন্ধান উপাদান - কাছাকাছি অনুসন্ধান বা পাঠ্য অনুসন্ধান ব্যবহার করে স্থানগুলি প্রকাশ করতে ব্যবহৃত হয়।
• স্থানের বিবরণ উপাদান - একটি পৃথক স্থানের বিবরণ প্রদর্শন করতে ব্যবহৃত হয়।
• Maps JavaScript API - আপনার পৃষ্ঠায় একটি মানচিত্র দেখানোর জন্য এবং Places UI কিট আমদানি করার জন্য ব্যবহৃত হয়।

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

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

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

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

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

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

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

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

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

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

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

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

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

প্রাথমিক অনুসন্ধান এবং ফলাফল প্রদর্শনের জন্য, আমরা জাভাস্ক্রিপ্ট ব্যবহার করে নেস্টেড রিকোয়েস্ট এলিমেন্টের রেফারেন্স পাবো এবং এর বৈশিষ্ট্যগুলি সেট করব। locationRestriction হিসেবে ব্যবহার করার জন্য একটি Circle চালু করুন, পূর্ববর্তী ধাপের মার্কার অবস্থানকে কেন্দ্রবিন্দু হিসেবে ব্যবহার করুন। তারপর, অনুসন্ধান শুরু করার জন্য request এলিমেন্টে 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-nearby-search-request> - Place Types ব্যবহার করে, কাছাকাছি স্থান অনুসন্ধান থেকে অনুসন্ধান ফলাফল রেন্ডার করুন।
• <gmp-place-text-search-request> - "Sushi in San Francisco" এর মতো একটি বিনামূল্যের টেক্সট ইনপুট ব্যবহার করে Places Text Search থেকে অনুসন্ধান ফলাফল রেন্ডার করুন।

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

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

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

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

আপনার ব্যবহারের ক্ষেত্রে প্রাসঙ্গিক ধরণের একটি উপসেট বেছে নেওয়ার পরামর্শ দেওয়া হচ্ছে। উদাহরণস্বরূপ, যদি আপনি পর্যটকদের কাছে হোটেলের কাছাকাছি কী আছে তা দেখানোর জন্য একটি অ্যাপ্লিকেশন তৈরি করেন, তাহলে আপনি বেছে নিতে পারেন: 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 ইভেন্টের জন্য একটি জাভাস্ক্রিপ্ট লিসেনার তৈরি করুন। ইভেন্ট হ্যান্ডলার ব্যবহারকারীর ইনপুট নেবে এবং অনুসন্ধান সম্পাদনের জন্য <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 সমস্ত উপাদানের কন্টেন্ট রেন্ডার করার জন্য পাস করা হয়েছে। কোন সামগ্রী রেন্ডার করবেন তা চয়ন করতে, Place Details Compact Element ডকুমেন্টেশন দেখুন।

জাভাস্ক্রিপ্টে একটি গ্লোবাল ভ্যারিয়েবল তৈরি করুন যাতে Place Details Compact Element এর রেফারেন্স থাকে, এবং এটি আপনার initialization কোডে পূরণ করুন, উদাহরণস্বরূপ:

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

addMarkers ফাংশনের মধ্যে, প্রতিটি মার্কারে একটি gmp-click ইভেন্ট লিসেনার যোগ করুন, এবং বর্তমান মার্কারটির Place ID পাস করে Place Details দেখানোর জন্য Place Details Compact Element কনফিগার করুন।

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

অবশেষে, মানচিত্রটি নির্বাচিত স্থানের ভিউপোর্টে স্থাপন করা হয়, যা এটিকে দৃশ্যমান করে তোলে।

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

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

অ্যাপ্লিকেশনটি দেখতে নিচের মতো হবে:

উপসংহার

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

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

অবদানকারীরা

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

উদ্দেশ্য

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

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

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

স্থান আবিষ্কারের দৃশ্যায়ন করুন

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

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

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

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

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

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

পূর্বশর্ত

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

• স্থান অনুসন্ধান উপাদান - কাছাকাছি অনুসন্ধান বা পাঠ্য অনুসন্ধান ব্যবহার করে স্থানগুলি প্রকাশ করতে ব্যবহৃত হয়।
• স্থানের বিবরণ উপাদান - একটি পৃথক স্থানের বিবরণ প্রদর্শন করতে ব্যবহৃত হয়।
• Maps JavaScript API - আপনার পৃষ্ঠায় একটি মানচিত্র দেখানোর জন্য এবং Places UI কিট আমদানি করার জন্য ব্যবহৃত হয়।

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

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

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

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

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

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

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

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

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

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

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

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

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

প্রাথমিক অনুসন্ধান এবং ফলাফল প্রদর্শনের জন্য, আমরা জাভাস্ক্রিপ্ট ব্যবহার করে নেস্টেড রিকোয়েস্ট এলিমেন্টের রেফারেন্স পাবো এবং এর বৈশিষ্ট্যগুলি সেট করব। locationRestriction হিসেবে ব্যবহার করার জন্য একটি Circle চালু করুন, পূর্ববর্তী ধাপের মার্কার অবস্থানকে কেন্দ্রবিন্দু হিসেবে ব্যবহার করুন। তারপর, অনুসন্ধান শুরু করার জন্য request এলিমেন্টে 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-nearby-search-request> - Place Types ব্যবহার করে, কাছাকাছি স্থান অনুসন্ধান থেকে অনুসন্ধান ফলাফল রেন্ডার করুন।
• <gmp-place-text-search-request> - "Sushi in San Francisco" এর মতো একটি বিনামূল্যের টেক্সট ইনপুট ব্যবহার করে Places Text Search থেকে অনুসন্ধান ফলাফল রেন্ডার করুন।

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

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

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

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

আপনার ব্যবহারের ক্ষেত্রে প্রাসঙ্গিক ধরণের একটি উপসেট বেছে নেওয়ার পরামর্শ দেওয়া হচ্ছে। উদাহরণস্বরূপ, যদি আপনি পর্যটকদের কাছে হোটেলের কাছাকাছি কী আছে তা দেখানোর জন্য একটি অ্যাপ্লিকেশন তৈরি করেন, তাহলে আপনি বেছে নিতে পারেন: 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 ইভেন্টের জন্য একটি জাভাস্ক্রিপ্ট লিসেনার তৈরি করুন। ইভেন্ট হ্যান্ডলার ব্যবহারকারীর ইনপুট নেবে এবং অনুসন্ধান সম্পাদনের জন্য <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 সমস্ত উপাদানের কন্টেন্ট রেন্ডার করার জন্য পাস করা হয়েছে। কোন সামগ্রী রেন্ডার করবেন তা চয়ন করতে, Place Details Compact Element ডকুমেন্টেশন দেখুন।

জাভাস্ক্রিপ্টে একটি গ্লোবাল ভ্যারিয়েবল তৈরি করুন যাতে Place Details Compact Element এর রেফারেন্স থাকে, এবং এটি আপনার initialization কোডে পূরণ করুন, উদাহরণস্বরূপ:

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

addMarkers ফাংশনের মধ্যে, প্রতিটি মার্কারে একটি gmp-click ইভেন্ট লিসেনার যোগ করুন, এবং বর্তমান মার্কারটির Place ID পাস করে Place Details দেখানোর জন্য Place Details Compact Element কনফিগার করুন।

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

অবশেষে, মানচিত্রটি নির্বাচিত স্থানের ভিউপোর্টে স্থাপন করা হয়, যা এটিকে দৃশ্যমান করে তোলে।

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

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

অ্যাপ্লিকেশনটি দেখতে নিচের মতো হবে:

উপসংহার

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

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

অবদানকারীরা

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