প্লেসেস UI কিট প্রবর্তন : একটি রেডি টু ইউজ, কম খরচের কম্পোনেন্ট লাইব্রেরি যা আপনাকে আপনার পছন্দের যেকোন ম্যাপে প্লেসের জন্য পরিচিত Google Maps UI আনতে দেয়। এটি ব্যবহার করে দেখুন, এবং GMP এর ভবিষ্যত গঠনে সাহায্য করতে আপনার ইনপুট শেয়ার করুন!

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

লক্ষ্য : Places UI কিট দিয়ে আপনার Places API বা Place Class এর বাস্তবায়ন প্রতিস্থাপন করুন।

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

বিকাশকারীরা যারা:

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

পূর্বশর্ত

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

মানচিত্র জাভাস্ক্রিপ্ট API লোডিং আপডেট করুন৷

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

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

স্থান বিবরণ উপাদান প্রয়োগ

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

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

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

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

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 (ওয়েব পরিষেবার জন্য) উল্লেখ করা।
কলব্যাক রেজোলিউশনে, ম্যানুয়ালি আপনার এইচটিএমএল উপাদান নির্বাচন করে এবং প্রাপ্ত ডেটা দিয়ে সেগুলি পপুলেট করে।

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

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> এলিমেন্টে প্লেস আইডি বা প্লেস অবজেক্ট প্লেস প্রপার্টিতে পাস করুন।

আপনি কীভাবে আপনার জাভাস্ক্রিপ্ট লজিকে প্লেস ডিটেইলস UI কিট প্রয়োগ করতে পারেন তার একটি উদাহরণ নিচে দেওয়া হল। স্থান বিবরণ উপাদান একটি রেফারেন্স পান. এটি বিদ্যমান থাকলে, স্থানের বিবরণ স্থান অনুরোধ উপাদানের একটি রেফারেন্স পান এবং একটি স্থান আইডি ব্যবহার করে স্থানের সম্পত্তি সেট করুন। উপরের 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, নাম, ঠিকানা, ইত্যাদির জন্য স্প্যান) স্থান অনুসন্ধান উপাদান 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 উপাদান সনাক্ত করুন এবং সরান৷ এটি সম্ভবত একটি আদর্শ 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> সমস্ত বিষয়বস্তু প্রদর্শন করতে ব্যবহার করা যেতে পারে, অথবা রেন্ডার করা বিষয়বস্তু কনফিগার করতে 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 শৈলী সেট করুন

স্বয়ংসম্পূর্ণ উপাদানের চেহারা এবং অনুভূতি কাস্টমাইজ করতে কাস্টম CSS বৈশিষ্ট্য উপলব্ধ। উদাহরণস্বরূপ, পটভূমির রঙ হালকা বেগুনিতে সেট করতে, আপনি উপাদানটিতে background-color বৈশিষ্ট্য সেট করবেন।

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

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

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

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

ইভেন্টের জন্য শুনুন

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

নির্বাচন অনুষ্ঠান

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

সাধারণ ঘটনা

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

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

প্রোগ্রামগতভাবে উপাদান ডেটা অ্যাক্সেস করুন

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

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

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

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

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

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

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

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

পূর্বশর্ত

মানচিত্র জাভাস্ক্রিপ্ট API লোডিং আপডেট করুন৷

স্থান বিবরণ উপাদান প্রয়োগ

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

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

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

জাভাস্ক্রিপ্ট লজিক মানিয়ে নিন

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

নতুন যুক্তি

স্থান অনুসন্ধান উপাদান বাস্তবায়ন

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

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

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

কাছাকাছি অনুসন্ধান উদাহরণ

পাঠ্য অনুসন্ধানের উদাহরণ

জাভাস্ক্রিপ্ট লজিক মানিয়ে নিন

বেসিক প্লেস স্বয়ংসম্পূর্ণ উপাদান প্রয়োগ করুন

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

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

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

জাভাস্ক্রিপ্ট লজিক মানিয়ে নিন

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

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

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

রেন্ডার করার জন্য ক্ষেত্র নির্বাচন করুন

CSS শৈলী সেট করুন

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

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

রেন্ডার করার জন্য ক্ষেত্র নির্বাচন করুন

বেসিক প্লেস স্বয়ংসম্পূর্ণ উপাদান কাস্টমাইজেশন

CSS শৈলী সেট করুন

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

ইভেন্টের জন্য শুনুন

নির্বাচন অনুষ্ঠান

সাধারণ ঘটনা

প্রোগ্রামগতভাবে উপাদান ডেটা অ্যাক্সেস করুন

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