বিদ্যমান স্থান API ব্যবহারকারীদের জন্য স্থান UI কিট গ্রহণ করুন

আপনার বিদ্যমান Places API বা Place Class বাস্তবায়নকে Places UI Kit উপাদানগুলিতে কীভাবে স্থানান্তর করবেন তা শিখুন।

এই নির্দেশিকাটি কাদের জন্য?

এই নির্দেশিকাটি সেইসব ডেভেলপারদের জন্য যাদের Places API ব্যবহার করে একটি বাস্তবায়ন আছে এবং Places UI Kit ব্যবহার করার জন্য তাদের কোড আপডেট করতে আগ্রহী। এটি সবচেয়ে সহায়ক হবে যদি আপনি ইতিমধ্যেই থাকেন:

  • প্লেসেস এপিআই (নতুন বা লিগ্যাসি) এন্ডপয়েন্টগুলিতে HTTP অনুরোধ করা।
  • Maps JavaScript API-এর মধ্যে Place Class ব্যবহার করা।
  • আপনার ওয়েব অ্যাপ্লিকেশনের UI-তে স্থানের তথ্য রেন্ডার করার জন্য API প্রতিক্রিয়া পরিচালনা করা।

পূর্বশর্ত

আপনার Google Cloud Project-এ Places UI Kit সক্ষম করুন। আপনি আপনার বিদ্যমান API কী ব্যবহার করা চালিয়ে যেতে পারেন, অথবা Places UI Kit-এর জন্য একটি নতুন API তৈরি করতে পারেন। কী সীমাবদ্ধ করা সহ আরও তথ্যের জন্য API কী ব্যবহার করুন দেখুন।

ম্যাপস জাভাস্ক্রিপ্ট এপিআই আপডেট করুন লোড হচ্ছে

Places UI কিটের জন্য Maps JavaScript API লোড করার জন্য Dynamic Library Import পদ্ধতি প্রয়োজন। আপনি যদি ডাইরেক্ট স্ক্রিপ্ট লোডিং ট্যাগ ব্যবহার করেন, তাহলে এটি আপডেট করতে হবে।

Maps JavaScript API-এর জন্য লোডিং স্ক্রিপ্ট আপডেট করার পরে, Places UI Kit ব্যবহার করার জন্য প্রয়োজনীয় লাইব্রেরিগুলি আমদানি করুন ।

স্থান বিবরণী উপাদানটি বাস্তবায়ন করুন

স্থান বিবরণী উপাদান এবং স্থান বিবরণী কম্প্যাক্ট উপাদান হল HTML উপাদান যা একটি স্থানের বিবরণ প্রদান করে।

বর্তমান বাস্তবায়ন

  • আপনি একটি HTTP অনুরোধ ব্যবহার করে একটি Place Details কল করতে পারেন, অথবা JavaScript API Place Class ব্যবহার করতে পারেন।
  • আপনি API প্রতিক্রিয়া বিশ্লেষণ করেন এবং HTML এবং CSS ব্যবহার করে স্থানের বিবরণ প্রদর্শন করেন।

স্থানের বিবরণ উপাদানে স্থানান্তর

HTML গঠন পরিবর্তন করুন

HTML কন্টেইনারটি চিহ্নিত করুন যেখানে স্থানের বিবরণ রেন্ডার করা হয়। আপনার কাস্টম HTML উপাদানগুলি (divs, নাম, ঠিকানা, ছবি ইত্যাদির জন্য স্প্যান) স্থানের বিবরণ উপাদান html দিয়ে প্রতিস্থাপন করুন।

দুটি উপাদান থেকে বেছে নিতে হবে:

  • স্থানের বিবরণ কম্প্যাক্ট উপাদান
  • স্থানের বিবরণের উপাদান

কোনটি ব্যবহার করবেন সে সম্পর্কে আরও তথ্যের জন্য, স্থানের বিবরণ উপাদান দেখুন।

আপনার বিদ্যমান HTML দেখতে এরকম হতে পারে।

<div id="my-place-details-container">
    <h2 id="place-name"></h2>
    <p id="place-address"></p>
    <img id="place-photo" src="" alt="Place photo">
    <!-- ... more custom elements -->
</div>

নতুন HTML এর উদাহরণ, যেখানে স্পষ্টভাবে বলা আছে কোন কন্টেন্ট প্রদর্শন করা হবে:

<gmp-place-details-compact orientation="horizontal" truncation-preferred style="display: none;">
    <gmp-place-details-place-request></gmp-place-details-place-request>
    <gmp-place-content-config>
        <gmp-place-media lightbox-preferred></gmp-place-media>
        <gmp-place-address></gmp-place-address>
        <gmp-place-rating></gmp-place-rating>
        <gmp-place-type></gmp-place-type>
        <gmp-place-price></gmp-place-price>
        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
        <gmp-place-open-now-status></gmp-place-open-now-status>
    </gmp-place-content-config>
</gmp-place-details-compact>

জাভাস্ক্রিপ্ট লজিক অ্যাডাপ্ট করুন

বিদ্যমান যুক্তি

আপনার বিদ্যমান যুক্তি সম্ভবত জড়িত:

  • একটি স্থান আইডি পুনরুদ্ধার করা হচ্ছে।
  • PlacesService().getDetails() ব্যবহার করে অথবা একটি ওয়েব পরিষেবা কল করে।
  • নির্দিষ্ট ডেটা অনুরোধ করার জন্য একটি ফিল্ড অ্যারে (JS API এর জন্য) বা FieldMask (ওয়েব পরিষেবার জন্য) নির্দিষ্ট করা।
  • কলব্যাক রেজোলিউশনে, আপনার HTML উপাদানগুলিকে ম্যানুয়ালি নির্বাচন করা এবং প্রাপ্ত ডেটা দিয়ে সেগুলিকে পূরণ করা।

আপনি কীভাবে স্থানের বিবরণ বাস্তবায়ন করতে পারেন তার একটি উদাহরণ নিচে দেওয়া হল:

async function getPlaceDetails(placeId) {
    const { Place } = await google.maps.importLibrary('places');
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: placeId
    });
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    // Log the result
    console.log(place.displayName);
    console.log(place.formattedAddress);
}
নতুন যুক্তি

আপনার নতুন যুক্তিতে অন্তর্ভুক্ত থাকবে:

  • আপনার প্লেস আইডি বা প্লেস অবজেক্টটি পুনরুদ্ধার করুন।
  • <gmp-place-details-place-request> এলিমেন্টের একটি রেফারেন্স পান।
  • <gmp-place-details-place-request> এলিমেন্টের প্লেস প্রপার্টিতে প্লেস আইডি অথবা প্লেস অবজেক্টটি পাস করুন।

আপনার জাভাস্ক্রিপ্ট লজিকে Place Details UI কিটটি কীভাবে বাস্তবায়ন করবেন তার একটি উদাহরণ নিচে দেওয়া হল। Place Details Element-এর একটি রেফারেন্স পান। যদি এটি বিদ্যমান থাকে, তাহলে Place Details Place Request এলিমেন্টের একটি রেফারেন্স পান এবং Place ID ব্যবহার করে place প্রপার্টি সেট করুন। উপরের HTML কোডের উদাহরণে, Place Details Element স্টাইলটি display: none এ সেট করা আছে। এটি display: block এ আপডেট করা হয়েছে।

function displayPlaceDetailsWithUIKit(placeId) {
  const placeDetailsElement = document.querySelector('gmp-place-details-compact');
  if (placeDetailsElement) {
    const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
    // Configure the element with the Place ID
    placeDetailsRequest.place = placeId
    placeDetailsElement.style.display = 'block';
    console.log("PlaceDetailsElement configured for place:", placeId);
  } else {
    console.error("PlaceDetailsElement not found in the DOM.");
  }
}

// Example usage:
const placeId = 'ChIJC8HakaIRkFQRiOgkgdHmqkk';
displayPlaceDetailsWithUIKit(placeId);

স্থান অনুসন্ধান উপাদান হল একটি HTML উপাদান যা একটি তালিকার মধ্যে স্থান অনুসন্ধানের ফলাফল রেন্ডার করে।

  • আপনি HTTP অনুরোধ ব্যবহার করে একটি টেক্সট অনুসন্ধান বা কাছাকাছি অনুসন্ধান সম্পাদন করেন, অথবা জাভাস্ক্রিপ্ট API প্লেস ক্লাস ব্যবহার করেন।
  • আপনি FieldMask ব্যবহার করে কোয়েরি প্যারামিটার, অবস্থানের সীমাবদ্ধতা বা পক্ষপাত, প্রকার এবং অনুরোধকৃত ক্ষেত্রগুলি নির্দিষ্ট করেন।
  • আপনি API প্রতিক্রিয়া বিশ্লেষণ করেন, স্থানগুলির অ্যারের মাধ্যমে পুনরাবৃত্তি করেন এবং ম্যানুয়ালি HTML তালিকা আইটেম তৈরি করেন।

HTML গঠন পরিবর্তন করুন

আপনার স্থান তালিকাটি যেখানে রেন্ডার করবেন সেই HTML কন্টেইনারটি সনাক্ত করুন। আপনার কাস্টম HTML উপাদানগুলি (divs, নাম, ঠিকানা ইত্যাদির জন্য স্প্যান) স্থান অনুসন্ধান উপাদান html উপাদান দিয়ে প্রতিস্থাপন করুন।

আপনার বিদ্যমান HTML দেখতে এরকম কিছু হতে পারে:

<div id="search-results-area">
    <h3>Nearby Places:</h3>
    <ul id="manual-places-list">
        <!-- JavaScript would dynamically insert list items here -->
        <!-- Example of what JS might generate:
    <li class="place-entry" data-place-id="SOME_PLACE_ID_1">
      <img class="place-icon" src="icon_url_1.png" alt="Icon">
      <span class="place-name">Place Name One</span> -
      <span class="place-vicinity">123 Main St</span>
    </li>
    <li class="place-entry" data-place-id="SOME_PLACE_ID_2">
      <img class="place-icon" src="icon_url_2.png" alt="Icon">
      <span class="place-name">Place Name Two</span> -
      <span class="place-vicinity">456 Oak Ave</span>
    </li>
    -->
        <li class="loading-message">Loading places...</li>
    </ul>
</div>

<gmp-place-search> কম্পোনেন্ট ব্যবহার করে প্লেস সার্চ এলিমেন্টটি বাস্তবায়িত হয়। সার্চের ধরণ কনফিগার করতে, নিম্নলিখিত স্লটেড কনফিগারেশন কম্পোনেন্টগুলির মধ্যে একটি অন্তর্ভুক্ত করুন:

  • <gmp-place-text-search-request> টেক্সট অনুসন্ধানের জন্য।
  • <gmp-place-nearby-search-request> কাছাকাছি অনুসন্ধানের জন্য।

ফলাফল কীভাবে প্রদর্শিত হবে তা নির্ধারণ করতে, আপনি <gmp-place-all-content> শর্টকাট ব্যবহার করতে পারেন, অথবা আপনার নিজস্ব উপস্থাপনা উপাদানগুলির সেট সরবরাহ করতে পারেন। selectable (তালিকার আইটেমগুলিতে ক্লিক করার অনুমতি দেওয়ার জন্য) এবং orientation (একটি অনুভূমিক বা উল্লম্ব বিন্যাসের জন্য) এর মতো মূল বৈশিষ্ট্যগুলি সরাসরি মূল উপাদানে সেট করা যেতে পারে।

কাছাকাছি অনুসন্ধানের উদাহরণ 
<gmp-place-search orientation="horizontal" selectable>
    <gmp-place-all-content> </gmp-place-all-content>
    <gmp-place-nearby-search-request></gmp-place-nearby-search-request>
</gmp-place-search>
টেক্সট সার্চের উদাহরণ 
<gmp-place-search orientation="horizontal" selectable>
  <gmp-place-all-content> </gmp-place-all-content>
  <gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>

জাভাস্ক্রিপ্ট লজিক অ্যাডাপ্ট করুন

আপনার জাভাস্ক্রিপ্টে, document.querySelector() ব্যবহার করে অনুসন্ধান নিয়ন্ত্রক উপাদানের একটি রেফারেন্স পান। আপনার সেটআপের উপর নির্ভর করে, এটি হয় <gmp-place-text-search-request> অথবা <gmp-place-nearby-search-request> উপাদান হবে।

এরপর, আপনার অনুসন্ধান সংজ্ঞায়িত করার জন্য এই কন্ট্রোলারের বৈশিষ্ট্যগুলি সেট করুন। প্রয়োজনীয় বৈশিষ্ট্যগুলি আপনি যে ধরণের অনুসন্ধান করছেন তার উপর নির্ভর করে।

একটি টেক্সট সার্চের জন্য ( <gmp-place-text-search-request> ), প্রাথমিক বৈশিষ্ট্য হল textQuery :

const textSearchController = document.querySelector('gmp-place-text-search-request');
textSearchController.textQuery = 'museums in London';

কাছাকাছি অনুসন্ধানের জন্য ( <gmp-place-nearby-search-request> ), আপনাকে locationRestriction ব্যবহার করে অনুসন্ধান এলাকা নির্ধারণ করতে হবে। তারপর আপনি সেই এলাকার মধ্যে নির্দিষ্ট ধরণের স্থানের জন্য ফিল্টার করতে includedTypes ব্যবহার করতে পারেন:

const nearbySearchController = document.querySelector('gmp-place-nearby-search-request');
nearbySearchController.locationRestriction = new google.maps.Circle({
    center: { lat: 51.5190, lng: -0.1347 },
    radius: 1000
});
nearbySearchController.includedTypes = ['restaurant'];

<gmp-place-search> কম্পোনেন্টটি তার কন্ট্রোলারের প্রয়োজনীয় বৈশিষ্ট্য সেট করার সাথে সাথে স্বয়ংক্রিয়ভাবে একটি নতুন অনুসন্ধান শুরু করে।

  • টেক্সট সার্চের ক্ষেত্রে, আপনি যখন textQuery তে একটি মান নির্ধারণ করেন তখনই সার্চটি চলে।
  • কাছাকাছি অনুসন্ধানের জন্য, একটি বৈধ locationRestriction প্রদানের পরে অনুসন্ধানটি পরিচালিত হয়।

বেসিক প্লেস অটোকম্পলিট এলিমেন্ট বাস্তবায়ন করুন

যেসব ডেভেলপারদের প্লেস সার্চ এলিমেন্টের প্রদত্ত UI ছাড়াই অনুসন্ধানের অভিজ্ঞতা প্রয়োজন, তাদের জন্য বেসিক প্লেস অটোকম্পলিট এলিমেন্ট উপলব্ধ।

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

এটি নিজে কোনও বিবরণ প্রদর্শন করে না, অথবা অন্য কোনও প্রোগ্রাম্যাটিকভাবে অ্যাক্সেসযোগ্য তথ্য প্রদান করে না।

বর্তমান বাস্তবায়ন

আপনার বিদ্যমান যুক্তি সম্ভবত জড়িত:

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

স্থান স্বয়ংসম্পূর্ণ উপাদানে স্থানান্তর

HTML গঠন পরিবর্তন করুন

আপনি যে HTML উপাদানটির সাথে Autocomplete উইজেটটি সংযুক্ত করেছেন তা শনাক্ত করুন এবং সরিয়ে ফেলুন। এটি সম্ভবত একটি স্ট্যান্ডার্ড HTML ইনপুট ফিল্ড ব্যবহার করছে। 

<input id="pac-input" type="text" placeholder="Search for a location" />

নতুন HTML এর উদাহরণ, ওয়েব কম্পোনেন্ট পদ্ধতি ব্যবহার করে আপনার পৃষ্ঠায় একটি বেসিক প্লেস অটোকম্পলিট উপাদান শুরু করুন। 

<gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>

জাভাস্ক্রিপ্ট লজিক অ্যাডাপ্ট করুন

আপনার জাভাস্ক্রিপ্ট লজিকের ক্ষেত্রে সম্ভবত একটি input HTML উপাদানের সাথে সংযুক্ত Autocomplete উইজেট তৈরি করা জড়িত। এই উইজেটটি তারপর place_changed ইভেন্টটি শোনে, এবং ফিরে আসা ডেটা দিয়ে একটি ক্রিয়া শুরু করে।

অপসারণের জন্য বিদ্যমান জাভাস্ক্রিপ্টের উদাহরণ: 

// Get the input element
const input = document.getElementById("pac-input");

// Create the Autocomplete widget instance
const autocomplete = new google.maps.places.Autocomplete(input, {
  fields: ["place_id", "geometry", "name"]
});

// Add a listener for the 'place_changed' event
autocomplete.addListener("place_changed", () => {
  // Your logic to get and display place information
  console.log(place.place_id);
});

আপনার নতুন জাভাস্ক্রিপ্ট লজিকটি বেসিক প্লেস অটোকম্পলিট এলিমেন্টের একটি রেফারেন্স পাবে এবং gmp-select ইভেন্টগুলি শুনবে: 

const placeAutocomplete = document.querySelector('gmp-basic-place-autocomplete');

placeAutocomplete.addEventListener('gmp-select', (event) => {
  console.log(event.place);
});

Autocomplete ড্রপ-ডাউনে একটি স্থান নির্বাচন করলে, gmp-select ইভেন্টটি সক্রিয় হবে। নির্বাচিত স্থানের স্থান আইডি event অবজেক্ট থেকে পুনরুদ্ধার করা যেতে পারে। এরপর স্থান আইডিটি স্থান বিবরণী উপাদানের একটি উদাহরণ শুরু করতে ব্যবহার করা যেতে পারে, নির্বাচিত স্থানের বিবরণ প্রদর্শন করতে।

হ্যান্ডেল কাস্টমাইজেশন

স্থানের বিবরণ উপাদান কাস্টমাইজেশন

ওরিয়েন্টেশন

স্থান বিবরণী উপাদানটি অনুভূমিক এবং উল্লম্ব উভয় দিক থেকেই রেন্ডার করা যেতে পারে। উল্লম্ব এবং অনুভূমিক উভয় দিক থেকে বেছে নিতে gmp-place-details-compact এ orientation অ্যাট্রিবিউট ব্যবহার করুন। উদাহরণস্বরূপ:

<gmp-place-details-compact orientation="vertical">

রেন্ডার করার জন্য ক্ষেত্রগুলি বেছে নিন

প্লেস ডিটেইলস এলিমেন্টের মধ্যে রেন্ডার করা কন্টেন্ট নির্দিষ্ট করতে কন্টেন্ট এলিমেন্ট ব্যবহার করুন। উদাহরণস্বরূপ, <gmp-place-type> কন্টেন্ট এলিমেন্ট বাদ দিলে প্লেস ডিটেইলস এলিমেন্ট নির্বাচিত স্থানের ধরণ রেন্ডার করা বন্ধ করবে। কন্টেন্ট এলিমেন্টের সম্পূর্ণ তালিকার জন্য, PlaceContentConfigElement রেফারেন্স ডকুমেন্টেশন দেখুন।

স্থান বিবরণী উপাদান থেকে ক্ষেত্র যোগ করা বা অপসারণ করা পৃষ্ঠায় উপাদানটি রেন্ডার করার খরচ পরিবর্তন করে না।

CSS স্টাইল সেট করুন

এলিমেন্টের রঙ এবং ফন্ট কনফিগার করার জন্য কাস্টম CSS প্রোপার্টি পাওয়া যায়। উদাহরণস্বরূপ, এলিমেন্টের ব্যাকগ্রাউন্ড সবুজে সেট করতে, নিম্নলিখিত CSS প্রোপার্টি সেট করুন: 

gmp-place-details-compact {
  --gmp-mat-color-surface: green;
}

আরও বিস্তারিত জানার জন্য PlaceDetailsCompactElement এর রেফারেন্স ডকুমেন্টেশন দেখুন।

স্থান অনুসন্ধান উপাদান কাস্টমাইজেশন

ওরিয়েন্টেশন

স্থান অনুসন্ধান উপাদানটি অনুভূমিক এবং উল্লম্ব উভয় দিক থেকেই রেন্ডার করা যেতে পারে। উল্লম্ব এবং অনুভূমিক উভয় দিক থেকে বেছে নিতে <gmp-place-search> এ orientation অ্যাট্রিবিউট ব্যবহার করুন। উদাহরণস্বরূপ: 

<gmp-place-search orientation="horizontal" selectable>

রেন্ডার করার জন্য ক্ষেত্রগুলি বেছে নিন

প্লেস সার্চ এলিমেন্টের মধ্যে রেন্ডার করা কন্টেন্ট নির্দিষ্ট করতে কন্টেন্ট এলিমেন্ট ব্যবহার করুন। <gmp-place-all-content> এলিমেন্টটি সমস্ত কন্টেন্ট প্রদর্শন করতে ব্যবহার করা যেতে পারে, অথবা রেন্ডার করা কন্টেন্ট কনফিগার করতে html ট্যাগের একটি নির্বাচন ব্যবহার করা যেতে পারে।

<gmp-place-content-config> এর মধ্যে <gmp-place-address> অন্তর্ভুক্ত করলে কেবল প্রতিটি স্থানের ঠিকানা রেন্ডার হবে, উদাহরণস্বরূপ: 

<gmp-place-search orientation="horizontal" selectable>
  <gmp-place-content-config>
    <gmp-place-address></gmp-place-address>
  </gmp-place-content-config>
  <gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>

বেসিক প্লেস অটোকম্পলিট এলিমেন্ট কাস্টমাইজেশন

CSS স্টাইল সেট করুন

অটোকমপ্লিট এলিমেন্টের লুক এবং ফিল কাস্টমাইজ করার জন্য কাস্টম সিএসএস প্রোপার্টি পাওয়া যায়। উদাহরণস্বরূপ, ব্যাকগ্রাউন্ড কালার হালকা বেগুনি করতে, আপনাকে এলিমেন্টে background-color প্রোপার্টি সেট করতে হবে। 

gmp-basic-place-autocomplete {
  background-color: #d993e6;
}

আরও বিস্তারিত জানার জন্য BasicPlaceAutocompleteElement রেফারেন্স ডকুমেন্টেশন দেখুন।

ইভেন্ট এবং ডেটা পরিচালনা করুন

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

ইভেন্টগুলি শুনুন

ব্যবহারকারীর মিথস্ক্রিয়া বা উপাদানের অবস্থার উপর ভিত্তি করে ক্রিয়া ট্রিগার করতে আপনি উপাদানগুলিতে ইভেন্ট শ্রোতা যোগ করতে পারেন।

নির্বাচন ইভেন্ট

  • gmp-select : ব্যবহারকারী যখন কোনও নির্বাচন করে তখন এই ইভেন্টটি চালু হয়।
    • প্লেস সার্চ এলিমেন্টে, যখন কোনও ব্যবহারকারী ফলাফল তালিকার কোনও স্থানে ক্লিক করেন তখন এটি ট্রিগার হয়।
    • বেসিক প্লেস অটোকম্পলিট এলিমেন্টে, যখন একজন ব্যবহারকারী ড্রপ-ডাউন তালিকার একটি পূর্বাভাসে ক্লিক করেন তখন এটি ট্রিগার হয়।

সাধারণ ঘটনা

স্থান অনুসন্ধান, স্থানের বিবরণ এবং মৌলিক স্থান স্বয়ংসম্পূর্ণ উপাদানগুলি নিম্নলিখিত ইভেন্টগুলিকে সমর্থন করে:

  • gmp-load : এলিমেন্ট এবং এর কন্টেন্ট লোড এবং রেন্ডারিং শেষ হলে এটি চালু হয়।
  • gmp-requesterror : সার্ভারে করা কোনও অনুরোধ ব্যর্থ হলে, উদাহরণস্বরূপ, একটি অবৈধ API কী-এর কারণে, এটি চালু করা হয়।

প্রোগ্রাম্যাটিকভাবে এলিমেন্ট ডেটা অ্যাক্সেস করুন

উপাদানগুলির সাথে ইন্টারঅ্যাক্ট করার পরে বা লোড করার পরে আপনি প্রোগ্রাম্যাটিকভাবে নির্দিষ্ট ডেটা পুনরুদ্ধার করতে পারেন।

  • স্থান অনুসন্ধান উপাদান এবং স্থান বিবরণ উপাদানের জন্য, আপনি নিম্নলিখিত তথ্যগুলি পুনরুদ্ধার করতে পারেন:
    • স্থান আইডি
    • অবস্থান (অক্ষাংশ ও দ্রাঘিমাংশ)
    • ভিউপোর্ট
  • বেসিক প্লেস অটোকম্পলিট এলিমেন্টের জন্য, আপনি নিম্নলিখিত তথ্যগুলি পুনরুদ্ধার করতে পারেন:
    • স্থান আইডি

উপাদানগুলির মধ্যে থাকা অন্যান্য সমস্ত ডেটা প্রোগ্রাম্যাটিকভাবে অ্যাক্সেসযোগ্য নয়।

আরও বিস্তারিত উদাহরণের জন্য, স্থান অনুসন্ধান উপাদান , স্থান বিবরণ উপাদান এবং মৌলিক স্থান স্বয়ংসম্পূর্ণ উপাদানের জন্য পৃথক ডকুমেন্টেশন দেখুন।

পরীক্ষা এবং পরিমার্জন

একবার আপনি Places UI Kit উপাদান(গুলি) একত্রিত করে ফেললে, একটি মসৃণ রূপান্তর এবং একটি ইতিবাচক ব্যবহারকারীর অভিজ্ঞতার জন্য পরীক্ষা অত্যন্ত গুরুত্বপূর্ণ। আপনার পরীক্ষায় বেশ কয়েকটি গুরুত্বপূর্ণ ক্ষেত্র অন্তর্ভুক্ত করা উচিত, যা আপনার প্রয়োগ করা সমস্ত উপাদানগুলিকে সম্বোধন করে: Place Details, Place Search এবং Basic Place Autocomplete উপাদান।

স্থানের বিবরণের উপাদান

স্থান বিবরণী উপাদানের জন্য, বিভিন্ন স্থানের জন্য বিশদ সঠিকভাবে প্রদর্শিত হচ্ছে কিনা তা যাচাই করে শুরু করুন। <gmp-place-details-place-request> উপাদানের .place সম্পত্তিতে বিভিন্ন স্থান আইডি পাস করে পরীক্ষা করুন। বিভিন্ন ধরণের প্রতিষ্ঠান (সমৃদ্ধ ডেটা, আগ্রহের স্থান, মৌলিক ঠিকানা) এবং বিভিন্ন অঞ্চল বা ভাষার স্থানগুলির প্রতিনিধিত্বকারী আইডি ব্যবহার করুন। সামগ্রীর বিন্যাস, বিন্যাস এবং উপস্থিতির দিকে গভীর মনোযোগ দিন।

স্থান অনুসন্ধান উপাদান

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

  • টেক্সট সার্চের জন্য, <gmp-place-text-search-request> এলিমেন্টে textQuery প্রোপার্টি সেট করে পরীক্ষা করুন, বিভিন্ন ইনপুট সহ: বিস্তৃত কোয়েরি, নির্দিষ্ট ঠিকানা এবং অবস্থান পক্ষপাত সহ কোয়েরি।
  • কাছাকাছি অনুসন্ধানের জন্য, <gmp-place-nearby-search-request> এলিমেন্টে locationRestriction এবং includedTypes বৈশিষ্ট্য সেট করে পরীক্ষা করুন। বিভিন্ন অবস্থানের আকার ব্যবহার করুন এবং ফিল্টার টাইপ করুন।

নিশ্চিত করুন যে তালিকাটি প্রাসঙ্গিক ফলাফল দিয়ে পূর্ণ হয়েছে এবং নির্বাচনের সময় gmp-select ইভেন্টটি সঠিকভাবে কাজ করছে।

বেসিক প্লেস অটোকম্পলিট এলিমেন্ট

বেসিক প্লেস অটোকম্পলিট এলিমেন্টের জন্য, ব্যবহারকারীর ইন্টারঅ্যাকশন এবং নির্বাচন ইভেন্ট দ্বারা প্রেরিত ডেটার উপর পরীক্ষায় ফোকাস করুন। নিশ্চিত করুন যে ব্যবহারকারী যখন কোনও পূর্বাভাসে ক্লিক করেন তখন gmp-select ইভেন্টটি নির্ভরযোগ্যভাবে কাজ করে। যাচাই করুন যে ইভেন্ট হ্যান্ডলারের event.place অবজেক্টটিতে একটি বৈধ প্লেস আইডি রয়েছে।

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

ত্রুটি পরিচালনা

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