আগে থেকে থাকা Places API ব্যবহারকারীদের জন্য Places UI Kit গ্রহণ করা

আপনার আগে থেকে থাকা Places API বা Place Class ইমপ্লিমেন্টেশন Places UI Kit কম্পোনেন্টে কীভাবে মাইগ্রেট করবেন তা জানুন।

এই গাইডটি কার জন্য

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

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

পূর্বশর্ত

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

Maps JavaScript API লোডিং আপডেট করুন

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

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

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

জায়গার বিবরণ এলিমেন্ট এবং জায়গার বিবরণ কম্প্যাক্ট এলিমেন্ট হল HTML এলিমেন্ট যা কোনও জায়গার বিবরণ দেখায়।

বর্তমান প্রয়োগ

  • আপনি HTTP অনুরোধ ব্যবহার করে জায়গার বিবরণ কল করেন অথবা JavaScript API Place ক্লাস ব্যবহার করেন।
  • আপনি API রেসপন্স পার্স করেন এবং HTML ও CSS ব্যবহার করে জায়গার বিবরণ দেখান।

Place Details এলিমেন্টে মাইগ্রেশন

HTML স্ট্রাকচার পরিবর্তন করুন

যে HTML কন্টেনারে জায়গার বিবরণ দেখানো হয় সেটি শনাক্ত করুন। আপনার কাস্টম HTML এলিমেন্ট (divs, নাম, ঠিকানা, ফটো ইত্যাদির জন্য spans) জায়গার বিবরণ এলিমেন্ট 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);
}
নতুন লজিক

আপনার নতুন লজিকে এগুলি অন্তর্ভুক্ত থাকবে:

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

আপনার জাভাস্ক্রিপ্ট লজিকে কীভাবে জায়গার বিবরণ UI কিট প্রয়োগ করতে পারেন তার একটি উদাহরণ নিচে দেওয়া হল। জায়গার বিবরণ এলিমেন্টের রেফারেন্স পান। এটি থাকলে, Place Details Place Request এলিমেন্টের রেফারেন্স পান এবং Place ID ব্যবহার করে প্রপার্টি সেট করুন। উপরে দেখানো HTML কোডের উদাহরণে, জায়গার বিবরণ এলিমেন্টের স্টাইল 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 অনুরোধ ব্যবহার করে টেক্সট সার্চ বা নিয়ারবাই সার্চ করেন অথবা JavaScript API প্লেস ক্লাস ব্যবহার করেন।
  • আপনি কোয়েরি প্যারামিটার, লোকেশন সংক্রান্ত বিধিনিষেধ বা পক্ষপাত, ধরন এবং FieldMask ব্যবহার করে অনুরোধ করা ফিল্ড নির্দিষ্ট করেন।
  • আপনি API রেসপন্স পার্স করেন, জায়গার অ্যারেতে ইটারেট করেন এবং ম্যানুয়ালি HTML তালিকার আইটেম তৈরি করেন।

HTML স্ট্রাকচার পরিবর্তন করুন

HTML কন্টেনার শনাক্ত করুন যেখানে আপনি নিজের জায়গার তালিকা রেন্ডার করেন। আপনার কাস্টম HTML এলিমেন্ট (divs, নামের জন্য spans, ঠিকানা ইত্যাদি) জায়গা সার্চ করা এলিমেন্ট 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>-এর জন্য নিয়ারবাই Search।

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

নিয়ারবাই Search-এর উদাহরণ
<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>

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

আপনার JavaScript-এ, 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';

নিয়ারবাই Search (<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 প্রদান করার পরে সার্চ করা হয়।

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

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

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

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

বর্তমান প্রয়োগ

আপনার আগে থেকে থাকা লজিকে সম্ভবত এগুলি অন্তর্ভুক্ত:

  • আপনার পৃষ্ঠায় টেক্সট ইনপুট ফিল্ড রেন্ডার করা যা ব্যবহারকারী টাইপ করার সাথে সাথে জায়গা অটোমেটিক সম্পূর্ণ করার সুবিধা কল করে ফলাফল দেখায়।
  • ব্যবহারকারীর বেছে নেওয়া জায়গার আইডি ব্যবহার করে আরও বিবরণ পাওয়া, যেমন Place Details API ব্যবহার করা।
  • বেছে নেওয়া জায়গার বিবরণ দেখানো হচ্ছে।

প্লেস অটো-কমপ্লিট এলিমেন্টে মাইগ্রেশন

HTML স্ট্রাকচার পরিবর্তন করুন

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

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

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

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

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

আপনার জাভাস্ক্রিপ্ট লজিকে সম্ভবত input HTML এলিমেন্টের সাথে অ্যাটাচ করা অটোমেটিক সম্পূর্ণ করার উইজেট তৈরি করার বিষয়টি অন্তর্ভুক্ত। এই উইজেট তারপর 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);
});

অটোমেটিক সম্পূর্ণ হওয়া ড্রপ-ডাউন থেকে কোনও জায়গা বেছে নিলে, 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> এলিমেন্ট ব্যবহার করে সব কন্টেন্ট দেখানো যেতে পারে অথবা এইচটিএমএল ট্যাগের একটি সিলেকশন ব্যবহার করে রেন্ডার করা কন্টেন্ট কনফিগার করা যেতে পারে।

<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 স্টাইল সেট করুন

অটোকমপ্লিট এলিমেন্টের লুক ও ফিল কাস্টমাইজ করার জন্য কাস্টম CSS প্রপার্টি উপলভ্য। যেমন, ব্যাকগ্রাউন্ডের রঙ হালকা বেগুনি করতে চাইলে, আপনাকে এলিমেন্টে background-color প্রপার্টি সেট করতে হবে।

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

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

ইভেন্ট ও ডেটা ম্যানেজ করা

Places UI Kit এলিমেন্ট হল ইন্টার‍্যাক্টিভ কম্পোনেন্ট যা আপনাকে ইভেন্ট শুনতে এবং প্রোগ্রাম্যাটিক্যালি ডেটা ফিরিয়ে আনতে দেয়।

ইভেন্ট শুনুন

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

বেছে নেওয়ার ইভেন্ট

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

সাধারণ ইভেন্ট

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

  • gmp-load: এলিমেন্ট ও তার কন্টেন্ট লোড ও রেন্ডার করা সম্পূর্ণ হলে ফায়ার করা হয়।
  • gmp-requesterror: সার্ভারে অনুরোধ করা না গেলে, যেমন, ভুল API কী-এর কারণে।

প্রোগ্র্যামাটিক উপায়ে এলিমেন্ট ডেটা অ্যাক্সেস করা

এলিমেন্টের সাথে ইন্টার‍্যাক্ট করা বা সেটি লোড হওয়ার পরে আপনি প্রোগ্র্যামাটিক প্রসেসে নির্দিষ্ট ডেটা ফিরিয়ে আনতে পারবেন।

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

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

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

টেস্টিং ও রিফাইনমেন্ট

Places UI Kit এলিমেন্ট ইন্টিগ্রেট করার পরে, মসৃণ ট্রানজিশন এবং ব্যবহারকারীর ইতিবাচক অভিজ্ঞতার জন্য পরীক্ষা করা অত্যন্ত গুরুত্বপূর্ণ। আপনার টেস্টিংয়ে বেশ কয়েকটি মূল ক্ষেত্র কভার করা উচিত, যেখানে আপনার প্রয়োগ করা সমস্ত এলিমেন্টকে অ্যাড্রেস করা হয়: জায়গার বিবরণ, জায়গা সার্চ করা এবং বেসিক জায়গা অটোমেটিক সম্পূর্ণ করার এলিমেন্ট।

জায়গার বিবরণ সংক্রান্ত এলিমেন্ট

জায়গার বিবরণ এলিমেন্টের জন্য, বিভিন্ন ধরনের জায়গার বিবরণ সঠিকভাবে দেখানো হচ্ছে কিনা তা যাচাই করে শুরু করুন। <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 ভেঙে না যায় বা বিভ্রান্তিকর না হয়।