আপনার বিদ্যমান Places API বা Place Class ইমপ্লিমেন্টেশনকে Places UI Kit কম্পোনেন্টগুলিতে কীভাবে মাইগ্রেট করবেন তা জানুন।
এই নির্দেশিকাটি কাদের জন্য
এই নির্দেশিকাটি সেইসব ডেভেলপারদের জন্য, যাদের Places API ব্যবহার করে একটি বিদ্যমান ইমপ্লিমেন্টেশন রয়েছে এবং যারা Places UI Kit ব্যবহার করার জন্য তাদের কোড আপডেট করতে আগ্রহী। আপনি যদি ইতিমধ্যেই নিম্নলিখিত শর্তগুলো পূরণ করে থাকেন, তবে এটি আপনার জন্য সবচেয়ে সহায়ক হবে:
- Places API (নতুন বা পুরোনো) এন্ডপয়েন্টগুলিতে HTTP অনুরোধ পাঠানো।
- Maps জাভাস্ক্রিপ্ট API-এর মধ্যে Place ক্লাসের ব্যবহার।
- আপনার ওয়েব অ্যাপ্লিকেশনের UI-তে তথ্য রেন্ডার করার জন্য API রেসপন্স হ্যান্ডেল করা।
পূর্বশর্ত
আপনার গুগল ক্লাউড প্রজেক্টে প্লেসেস UI কিট সক্রিয় করুন। আপনি আপনার বিদ্যমান API কী ব্যবহার করা চালিয়ে যেতে পারেন, অথবা প্লেসেস UI কিট-এর জন্য একটি নতুন কী তৈরি করতে পারেন। কী সীমাবদ্ধ করা সহ আরও তথ্যের জন্য ‘API কী ব্যবহার করুন’ দেখুন।
মানচিত্র আপডেট করুন জাভাস্ক্রিপ্ট এপিআই লোড হচ্ছে
Places UI Kit-এ Maps JavaScript API লোড করার জন্য Dynamic Library Import পদ্ধতিটি প্রয়োজন। আপনি যদি সরাসরি স্ক্রিপ্ট লোডিং ট্যাগ ব্যবহার করেন, তবে এটি অবশ্যই আপডেট করতে হবে।
Maps JavaScript API-এর লোডিং স্ক্রিপ্ট আপডেট করার পর, Places UI Kit ব্যবহার করার জন্য প্রয়োজনীয় লাইব্রেরিগুলো ইম্পোর্ট করুন ।
স্থানের বিবরণ উপাদানটি বাস্তবায়ন করুন
Place Details Element এবং Place Details Compact Element হলো এমন HTML এলিমেন্ট যা কোনো স্থানের বিবরণ প্রদর্শন করে।
বর্তমান বাস্তবায়ন
- আপনি HTTP অনুরোধ ব্যবহার করে অথবা জাভাস্ক্রিপ্ট API-এর Place Class ব্যবহার করে স্থানের বিবরণ (Place Details) জানতে পারেন।
- আপনি এপিআই প্রতিক্রিয়াটি বিশ্লেষণ করে এইচটিএমএল এবং সিএসএস ব্যবহার করে স্থানের বিবরণ প্রদর্শন করেন।
স্থানের বিবরণ উপাদানে স্থানান্তর
এইচটিএমএল কাঠামো পরিবর্তন করুন
যে HTML কন্টেইনারে স্থানের বিবরণ রেন্ডার করা হয়, সেটি শনাক্ত করুন। আপনার নিজস্ব HTML এলিমেন্টগুলো (নাম, ঠিকানা, ছবি ইত্যাদির জন্য div, span) Place Details Element 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()ব্যবহার করে অথবা একটি ওয়েব সার্ভিস কল করে। - নির্দিষ্ট ডেটা অনুরোধ করার জন্য ফিল্ডস অ্যারে (জেএস এপিআই-এর জন্য) অথবা ফিল্ডমাস্ক (ওয়েব সার্ভিসের জন্য) উল্লেখ করা।
- কলব্যাক রেজোলিউশনে, আপনার HTML এলিমেন্টগুলো ম্যানুয়ালি নির্বাচন করুন এবং প্রাপ্ত ডেটা দিয়ে সেগুলো পূরণ করুন।
নিচে একটি উদাহরণ দেওয়া হলো, যেখানে দেখানো হতে পারে কীভাবে স্থানের বিবরণ (Place Details) বাস্তবায়ন করা যেতে পারে:
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 প্রপার্টিতে Place ID অথবা Place Object-টি পাস করুন।
আপনার জাভাস্ক্রিপ্ট লজিকে কীভাবে প্লেস ডিটেইলস 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 অনুরোধ ব্যবহার করে অথবা জাভাস্ক্রিপ্ট API-এর Place ক্লাস ব্যবহার করে টেক্সট সার্চ বা কাছাকাছি অনুসন্ধান করতে পারেন।
- আপনি FieldMask ব্যবহার করে কোয়েরি প্যারামিটার, অবস্থানগত সীমাবদ্ধতা বা পক্ষপাত, প্রকার এবং অনুরোধকৃত ফিল্ডসমূহ নির্দিষ্ট করেন।
- আপনি এপিআই প্রতিক্রিয়াটি পার্স করেন, স্থানগুলির অ্যারের মধ্য দিয়ে পুনরাবৃত্তি করেন এবং ম্যানুয়ালি এইচটিএমএল তালিকার আইটেম তৈরি করেন।
স্থান অনুসন্ধান উপাদানে স্থানান্তর
এইচটিএমএল কাঠামো পরিবর্তন করুন
আপনার স্থানের তালিকাটি যে HTML কন্টেইনারে রেন্ডার করেন, সেটি শনাক্ত করুন। আপনার নিজস্ব HTML এলিমেন্টগুলো (নাম, ঠিকানা ইত্যাদির জন্য div, span) Place Search Element 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 ছাড়াই সার্চ অভিজ্ঞতা চান, তাদের জন্য বেসিক প্লেস অটোকমপ্লিট এলিমেন্ট উপলব্ধ রয়েছে।
আপনার কাস্টম ইউজার ইন্টারফেসে ফলাফল কীভাবে প্রদর্শিত হবে তার উপর সম্পূর্ণ নিয়ন্ত্রণ বজায় রেখে একটি সার্চ ইনপুট ফিল্ড তৈরি করার জন্য এই এলিমেন্টটি আদর্শ। অটোকমপ্লিট এলিমেন্টের একমাত্র দায়িত্ব হলো ব্যবহারকারী টাইপ করার সাথে সাথে স্থানের পূর্বাভাস প্রদান করা এবং প্রোগ্রাম্যাটিকভাবে নির্বাচিত স্থানের জন্য একটি প্লেস আইডি প্রকাশ করা।
এটি নিজে থেকে কোনো বিবরণ প্রদর্শন করে না, বা প্রোগ্রাম দ্বারা প্রবেশযোগ্য অন্য কোনো তথ্যও প্রদান করে না।
বর্তমান বাস্তবায়ন
আপনার বর্তমান যুক্তিতে সম্ভবত নিম্নলিখিত বিষয়গুলো অন্তর্ভুক্ত রয়েছে:
- আপনার পেজে একটি টেক্সট ইনপুট ফিল্ড রেন্ডার করা, যা ব্যবহারকারীর টাইপ করার সাথে সাথে 'প্লেস অটোকমপ্লিট' কল করে ফলাফল প্রদর্শন করে।
- ব্যবহারকারীর নির্বাচিত স্থানের প্লেস আইডি ব্যবহার করে আরও বিস্তারিত তথ্য সংগ্রহ করা, উদাহরণস্বরূপ প্লেস ডিটেইলস এপিআই ব্যবহার করে।
- নির্বাচিত স্থানের বিবরণ প্রদর্শন করা হচ্ছে।
অটোকমপ্লিট এলিমেন্ট স্থাপনে স্থানান্তর
এইচটিএমএল কাঠামো পরিবর্তন করুন
আপনি যে 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 ইভেন্টটি সক্রিয় হবে। নির্বাচিত স্থানটির প্লেস আইডি (Place ID) event অবজেক্ট থেকে সংগ্রহ করা যাবে। এরপর সেই প্লেস আইডি ব্যবহার করে প্লেস ডিটেইলস এলিমেন্ট (Place Details Element)- এর একটি ইনস্ট্যান্স তৈরি করা যায়, যা নির্বাচিত স্থানটির বিস্তারিত তথ্য প্রদর্শন করে।
হ্যান্ডেল কাস্টমাইজেশন
স্থানের বিবরণ উপাদানের কাস্টমাইজেশন
অভিমুখীকরণ
প্লেস ডিটেইলস এলিমেন্টটি হরাইজন্টাল এবং ভার্টিকাল উভয় ওরিয়েন্টেশনেই রেন্ডার করা যায়। ভার্টিকাল এবং হরাইজন্টালের মধ্যে যেকোনো একটি বেছে নিতে 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 Elements হলো ইন্টারেক্টিভ কম্পোনেন্ট যা আপনাকে প্রোগ্রাম্যাটিকভাবে ইভেন্ট লিসেন করতে এবং ডেটা পুনরুদ্ধার করতে দেয়।
অনুষ্ঠানগুলোর জন্য শুনুন
ব্যবহারকারীর মিথস্ক্রিয়া বা এলিমেন্টের অবস্থার উপর ভিত্তি করে অ্যাকশন ট্রিগার করতে আপনি এলিমেন্টগুলোতে ইভেন্ট লিসেনার যোগ করতে পারেন।
বাছাই পর্ব
-
gmp-select: ব্যবহারকারী কোনো কিছু নির্বাচন করলে এই ইভেন্টটি ফায়ার হয়।- স্থান অনুসন্ধান উপাদানটি তখন সক্রিয় হয়, যখন কোনো ব্যবহারকারী ফলাফলের তালিকা থেকে কোনো স্থানে ক্লিক করেন।
- বেসিক প্লেস অটোকমপ্লিট এলিমেন্ট-এ, এটি তখন ট্রিগার হয় যখন কোনো ব্যবহারকারী ড্রপ-ডাউন লিস্ট থেকে কোনো প্রেডিকশনে ক্লিক করেন।
সাধারণ ঘটনা
Place Search, Place Details, এবং Basic Place Autocomplete এলিমেন্টগুলো নিম্নলিখিত ইভেন্টগুলো সমর্থন করে:
-
gmp-load: এলিমেন্ট এবং এর কন্টেন্ট লোড ও রেন্ডার হওয়া শেষ হলে এটি ট্রিগার হয়। -
gmp-requesterror: সার্ভারে করা কোনো অনুরোধ ব্যর্থ হলে এই ত্রুটিটি ঘটে, যেমন—একটি অবৈধ API কী-এর কারণে।
প্রোগ্রামের মাধ্যমে এলিমেন্ট ডেটা অ্যাক্সেস করুন
এলিমেন্টগুলোর সাথে ইন্টারঅ্যাক্ট করার বা সেগুলো লোড হওয়ার পরেও আপনি প্রোগ্রাম্যাটিকভাবে সেগুলো থেকে নির্দিষ্ট ডেটা পুনরুদ্ধার করতে পারেন।
- স্থান অনুসন্ধান উপাদান এবং স্থান বিবরণ উপাদানের জন্য, আপনি নিম্নলিখিত তথ্যগুলো পেতে পারেন:
- স্থান আইডি
- অবস্থান (অক্ষাংশ ও দ্রাঘিমাংশ)
- ভিউপোর্ট
- বেসিক প্লেস অটোকমপ্লিট এলিমেন্টের জন্য, আপনি নিম্নলিখিত তথ্যগুলো পেতে পারেন:
- স্থান আইডি
এলিমেন্টগুলোর মধ্যে থাকা অন্য সকল ডেটা প্রোগ্রামগতভাবে অ্যাক্সেসযোগ্য নয়।
আরও বিস্তারিত উদাহরণের জন্য, প্লেস সার্চ এলিমেন্ট , প্লেস ডিটেইলস এলিমেন্ট এবং বেসিক প্লেস অটোকমপ্লিট এলিমেন্ট- এর স্বতন্ত্র ডকুমেন্টেশন দেখুন।
পরীক্ষা এবং পরিমার্জন
একবার আপনি প্লেসেস UI কিট-এর উপাদানগুলো সংহত করে ফেললে, একটি মসৃণ রূপান্তর এবং ইতিবাচক ব্যবহারকারীর অভিজ্ঞতার জন্য টেস্টিং অত্যন্ত গুরুত্বপূর্ণ। আপনার টেস্টিং-এ কয়েকটি মূল ক্ষেত্র অন্তর্ভুক্ত থাকা উচিত এবং আপনার প্রয়োগ করা সমস্ত উপাদান—যেমন প্লেস ডিটেইলস, প্লেস সার্চ এবং বেসিক প্লেস অটোকমপ্লিট—এর উপর নজর রাখা উচিত।
স্থানের বিবরণ উপাদান
প্লেস ডিটেইলস এলিমেন্টের জন্য, প্রথমে যাচাই করে নিন যে বিভিন্ন ধরনের স্থানের বিবরণ সঠিকভাবে প্রদর্শিত হচ্ছে কিনা। <gmp-place-details-place-request> এলিমেন্টের .place প্রপার্টিতে বিভিন্ন প্লেস আইডি পাস করে এটি পরীক্ষা করুন। বিভিন্ন ধরনের প্রতিষ্ঠান (সমৃদ্ধ ডেটা সহ ব্যবসা, দর্শনীয় স্থান, সাধারণ ঠিকানা) এবং বিভিন্ন অঞ্চল বা ভাষার স্থানের প্রতিনিধিত্বকারী আইডি ব্যবহার করুন। কন্টেন্টের ফরম্যাটিং, লেআউট এবং উপস্থিতির দিকে বিশেষভাবে মনোযোগ দিন।
স্থান অনুসন্ধান উপাদান
আপনি যদি ‘Place Search Element’ প্রয়োগ করে থাকেন, তবে বিভিন্ন অনুসন্ধানের পরিস্থিতিতে এর রেন্ডারিং এবং আচরণ যাচাই করুন।
- টেক্সট সার্চের জন্য,
<gmp-place-text-search-request>এলিমেন্টেরtextQueryপ্রপার্টিতে বিভিন্ন ইনপুট সেট করে পরীক্ষা করুন: যেমন—সাধারণ কোয়েরি, নির্দিষ্ট ঠিকানা, এবং অবস্থান-ভিত্তিক কোয়েরি। - কাছাকাছি অনুসন্ধানের জন্য,
<gmp-place-nearby-search-request>এলিমেন্টেlocationRestrictionএবংincludedTypesপ্রপার্টিগুলো সেট করে পরীক্ষা করুন। বিভিন্ন আকারের অবস্থান এবং টাইপ ফিল্টার ব্যবহার করুন।
নিশ্চিত করুন যে তালিকাটি প্রাসঙ্গিক ফলাফল দিয়ে পূর্ণ হচ্ছে এবং নির্বাচনের পর gmp-select ইভেন্টটি সঠিকভাবে সক্রিয় হচ্ছে।
মৌলিক স্থান স্বয়ংসম্পূর্ণ উপাদান
বেসিক প্লেস অটোকমপ্লিট এলিমেন্টের ক্ষেত্রে, ব্যবহারকারীর ইন্টারঅ্যাকশন এবং সিলেকশন ইভেন্টের মাধ্যমে পাঠানো ডেটার উপর টেস্টিং কেন্দ্রীভূত করুন। ব্যবহারকারী কোনো প্রেডিকশনে ক্লিক করলে gmp-select ইভেন্টটি নির্ভরযোগ্যভাবে ফায়ার হয় কিনা তা নিশ্চিত করুন। ইভেন্ট হ্যান্ডলারের event.place অবজেক্টটিতে একটি বৈধ প্লেস আইডি আছে কিনা তা যাচাই করুন।
সবচেয়ে গুরুত্বপূর্ণ হলো, সম্পূর্ণ কার্যপ্রবাহটি পরীক্ষা করুন: অটোকমপ্লিট ড্রপ-ডাউন থেকে একটি স্থান নির্বাচন করুন এবং যাচাই করুন যে এর প্লেস আইডিটি প্লেস ডিটেইলস এলিমেন্টের মতো অন্য কোনো এলিমেন্ট পূরণ করতে সফলভাবে ব্যবহার করা যাচ্ছে কিনা।
ত্রুটি পরিচালনা
সমস্ত কম্পোনেন্ট জুড়ে এরর হ্যান্ডলিং-এর কঠোর পরীক্ষা অপরিহার্য। প্লেস ডিটেইলস এলিমেন্টে অবৈধ বা অস্তিত্বহীন প্লেস আইডি পাস করা, অথবা প্লেস সার্চ এলিমেন্টের জন্য অবৈধ সার্চ প্যারামিটার ব্যবহার করার মতো পরিস্থিতি অনুকরণ করুন। নেটওয়ার্ক সমস্যা অনুকরণ করে বা একটি অবৈধ এপিআই কী ব্যবহার করে gmp-requesterror ইভেন্টটি ট্রিগার করুন, যাতে আপনার অ্যাপ্লিকেশনটি এটি সুষ্ঠুভাবে পরিচালনা করতে পারে। একটি ত্রুটিপূর্ণ বা বিভ্রান্তিকর UI প্রতিরোধ করতে ব্যবহারকারী-বান্ধব এরর মেসেজ এবং লগিং প্রয়োগ করুন।