উদ্দেশ্য
ব্যবহারকারীদের কাছাকাছি অনুসন্ধান বা টেক্সট সার্চের মাধ্যমে স্থান খুঁজে পেতে সাহায্য করতে এবং তাদের আগ্রহের স্থানগুলো অন্বেষণের ক্ষমতা বাড়াতে, গুগল ম্যাপসের সাথে প্লেস সার্চ এলিমেন্ট কীভাবে ইন্টিগ্রেট করতে হয় তা শিখুন। আপনার অ্যাপ্লিকেশনে প্রদর্শিত স্থানগুলো সম্পর্কে আরও বিস্তারিত তথ্য দিতে প্লেস ডিটেইলস কমপ্যাক্ট এলিমেন্ট ব্যবহার করুন।
স্থান অনুসন্ধান উপাদান (Place Search Element) বলতে কী বোঝায়?
প্লেস সার্চ এলিমেন্টটি ম্যাপস জাভাস্ক্রিপ্ট এপিআই-এর প্লেসেস ইউআই কিট-এর একটি অংশ। এটি একটি এইচটিএমএল এলিমেন্ট যা আপনার অ্যাপ্লিকেশনের মধ্যে কোনো স্থান অনুসন্ধানের ফলাফল সরাসরি একটি তালিকা আকারে প্রদর্শন করে। এই এলিমেন্টটি নিয়ারবাই সার্চ বা টেক্সট সার্চ ব্যবহার করে খুঁজে পাওয়া স্থানগুলো প্রদর্শনের প্রক্রিয়াকে সহজ করে, যা স্থান আবিষ্কারের জন্য একটি নির্বিঘ্ন ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। যখন কোনো ব্যবহারকারী তালিকা থেকে একটি স্থান নির্বাচন করেন, তখন আপনি প্রায়শই একটি ইনফো উইন্ডো এবং প্লেস ডিটেইলস এলিমেন্ট ব্যবহার করে মানচিত্রে এর বিবরণ প্রদর্শন করতে পারেন।
স্থান আবিষ্কারের কল্পনা করুন
নিচের ছবিতে প্লেস সার্চ এলিমেন্ট-এর কার্যকারিতার একটি উদাহরণ দেখানো হয়েছে। বাম দিকে রেস্তোরাঁর একটি তালিকা প্রদর্শিত হচ্ছে (প্লেস সার্চ এলিমেন্ট)। যখন কোনো রেস্তোরাঁ নির্বাচন করা হয়, তখন ম্যাপের একটি ইনফো উইন্ডোতে তার বিবরণ দেখা যায় এবং ম্যাপটি সেটির অবস্থানে কেন্দ্রীভূত হয়।
স্থান আবিষ্কারের ব্যবহারিক ক্ষেত্র
স্থান অনুসন্ধান উপাদান (Place Search Element) সংহতকরণ বিভিন্ন শিল্পক্ষেত্রের নানা অ্যাপ্লিকেশনকে উন্নত করতে পারে:
- ভ্রমণ ও পর্যটন: পর্যটকদের কোনো এলাকার আকর্ষণীয় স্থান, হোটেল বা নির্দিষ্ট ধরনের খাবার খোঁজার সুযোগ দিন।
- রিয়েল এস্টেট: সম্ভাব্য ক্রেতা বা ভাড়াটেদের কাছাকাছি স্কুল, সুপারমার্কেট বা গণপরিবহনের বিকল্প খুঁজে পেতে সক্ষম করুন।
- লজিস্টিকস ও পরিষেবা: চালকদের ইভি চার্জিং স্টেশন, গ্যাস স্টেশন বা নির্দিষ্ট সার্ভিস সেন্টার খুঁজে পেতে সহায়তা করা।
সমাধান কর্মপ্রবাহ: স্থান আবিষ্কার বাস্তবায়ন
এই বিভাগে, ম্যাপে স্থান খুঁজে বের করার জন্য প্লেস সার্চ এলিমেন্টটি ইন্টিগ্রেট করার ধাপগুলো দেখানো হয়েছে, যার মধ্যে প্লেসেস ইউআই কিট (Places UI Kit)-এর সাথে ইন্টারঅ্যাক্ট করার জন্য কোড স্নিপেটও অন্তর্ভুক্ত রয়েছে। আমরা ম্যাপ ইনিশিয়ালাইজ করা এবং নিয়ারবাই সার্চ (Nearby Search) ও টেক্সট সার্চ (Text Search) উভয় কার্যকারিতা বাস্তবায়ন করার বিষয়টি আলোচনা করব। সবশেষে, ম্যাপে কোনো নির্দিষ্ট স্থানের পিনে ক্লিক করলে সেই স্থানটি সম্পর্কে আরও বিস্তারিত তথ্য দেখানোর জন্য আমরা প্লেস ডিটেইলস (Place Details) এলিমেন্টটি ব্যবহার করব।
পূর্বশর্ত
নিম্নলিখিত নথিপত্রের সাথে পরিচিতি থাকা বাঞ্ছনীয়:
- স্থান অনুসন্ধান উপাদান - নিকটবর্তী অনুসন্ধান অথবা পাঠ্য অনুসন্ধানের মাধ্যমে স্থান খুঁজে বের করতে ব্যবহৃত হয়।
- স্থানের বিবরণ উপাদান - কোনো একটি নির্দিষ্ট স্থানের বিবরণ প্রদর্শন করতে ব্যবহৃত হয়।
- Maps JavaScript API - আপনার পেজে মানচিত্র দেখানোর জন্য এবং Places UI Kit ইম্পোর্ট করার জন্য ব্যবহৃত হয়।
আপনার প্রজেক্টে Maps JavaScript API এবং Places UI Kit সক্রিয় করুন।
কাজ শুরু করার আগে নিশ্চিত হয়ে নিন যে আপনি ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করেছেন এবং প্রয়োজনীয় লাইব্রেরিগুলো ইম্পোর্ট করেছেন । এই ডকুমেন্টটি আরও ধরে নেয় যে, এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট সহ ওয়েব ডেভেলপমেন্ট সম্পর্কে আপনার কার্যকরী জ্ঞান রয়েছে।
পৃষ্ঠায় একটি মানচিত্র যোগ করুন
প্রথম ধাপ হলো আপনার পেজে একটি ম্যাপ যোগ করা। এই ম্যাপটি প্লেস সার্চ এলিমেন্টের ফলাফলগুলোকে নির্বাচনযোগ্য পিন হিসেবে প্রদর্শন করতে ব্যবহৃত হবে।
একটি পৃষ্ঠায় মানচিত্র যোগ করার দুটি উপায় আছে:
-
gmp-mapএইচটিএমএল ওয়েব কম্পোনেন্ট ব্যবহার করা। - জাভাস্ক্রিপ্ট ব্যবহার করে।
এই পৃষ্ঠার কোড স্নিপেটগুলো একটি জাভাস্ক্রিপ্ট ম্যাপ ব্যবহার করে তৈরি করা হয়েছে।
মানচিত্রটিকে এমন কোনো স্থানে কেন্দ্র করে রাখা যেতে পারে যেখানে ব্যবহারকারী অনুসন্ধান করতে পারবেন, যেমন কোনো হোটেল; অথবা মানচিত্রটিকে কেন্দ্রে আনার জন্য ব্যবহারকারীর বর্তমান অবস্থান জানতে চাওয়ার ব্যবস্থা করা যেতে পারে। এই নথির উদ্দেশ্যে, আমরা অনুসন্ধানটিকে স্থির রাখার জন্য একটি নির্দিষ্ট অবস্থান ব্যবহার করব।
আপনি যদি কোনো নির্দিষ্ট স্থানের (যেমন হোটেল) কাছাকাছি কোনো জায়গা কল্পনা করতে চান, তাহলে সেই স্থানটিকে বোঝানোর জন্য মানচিত্রে একটি মার্কার রাখুন । উদাহরণস্বরূপ:
মানচিত্রটি সান ফ্রান্সিসকোকে কেন্দ্র করে তৈরি, এবং কাছাকাছি যে স্থানটি আমরা খুঁজছি তা বোঝানোর জন্য একটি নীল পিন রয়েছে। PinElement ব্যবহার করে পিনের রঙটি কাস্টমাইজ করা হয়েছে। UI থেকে Map Type কন্ট্রোলটি লুকানো হয়েছে।
স্থান অনুসন্ধান উপাদান সেট আপ করুন
এখন, আমরা প্লেস সার্চ এলিমেন্টটি প্রদর্শন করার জন্য 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 ইনিশিয়ালাইজ করুন। তারপর, অনুসন্ধানটি চালু করার জন্য রিকোয়েস্ট এলিমেন্টে 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>- স্থানের প্রকারভেদ ব্যবহার করে নিকটবর্তী স্থান অনুসন্ধানের ফলাফল প্রদর্শন করে। -
<gmp-place-text-search-request>- "সান ফ্রান্সিসকোতে সুশি"-এর মতো একটি ফ্রি টেক্সট ইনপুট ব্যবহার করে প্লেসেস টেক্সট সার্চ থেকে অনুসন্ধানের ফলাফল রেন্ডার করে।
এগুলো হলো <gmp-place-search> এর ভেতরের নেস্টেড এলিমেন্ট। এরপর আপনি জাভাস্ক্রিপ্ট ব্যবহার করে সেই নেস্টেড রিকোয়েস্ট এলিমেন্টের প্রোপার্টি সেট করার মাধ্যমে সার্চ চালু করেন।
এই অংশে উভয় পদ্ধতির বাস্তবায়ন বর্ণনা করা হয়েছে।
কাছাকাছি অনুসন্ধান
ব্যবহারকারীদের কাছাকাছি স্থান অনুসন্ধানের সুযোগ দিতে, প্রথমে তাদের জন্য স্থানের ধরন (Place Type ) বেছে নেওয়ার জন্য একটি UI এলিমেন্ট প্রয়োজন। আপনার অ্যাপ্লিকেশনের জন্য সবচেয়ে উপযুক্ত নির্বাচন পদ্ধতিটি বেছে নিন, যেমন—বিভিন্ন ধরনের স্থানের তালিকা সহ একটি ড্রপ-ডাউন তালিকা।
আপনার ব্যবহারের ক্ষেত্রের সাথে প্রাসঙ্গিক এমন কিছু প্রকার বেছে নেওয়ার পরামর্শ দেওয়া হয়। উদাহরণস্বরূপ, আপনি যদি পর্যটকদের হোটেলের আশেপাশে কী আছে তা দেখানোর জন্য একটি অ্যাপ্লিকেশন তৈরি করেন, তাহলে আপনি বেছে নিতে পারেন: 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’-এর রেফারেন্স রাখার জন্য একটি গ্লোবাল ভেরিয়েবল তৈরি করুন এবং আপনার ইনিশিয়ালাইজেশন কোডে এটি পূরণ করুন, উদাহরণস্বরূপ:
let placeDetailsElement;
...
placeDetailsElement = document.querySelector('gmp-place-details-compact');
addMarkers ফাংশনের মধ্যে, প্রতিটি মার্কারে একটি gmp-click ইভেন্ট লিসেনার যোগ করুন এবং বর্তমান মার্কারের প্লেস আইডি পাস করে প্লেস ডিটেইলস কমপ্যাক্ট এলিমেন্টটি কনফিগার করুন, যাতে স্থানের বিবরণ দেখানো হয়।
এটি সম্পন্ন হলে, মার্কারের উপর অ্যাঙ্কর করা প্লেস ডিটেইলস কম্প্যাক্ট এলিমেন্টটি প্রদর্শনের জন্য একটি ইনফো উইন্ডো খোলা হয়।
অবশেষে, মানচিত্রটি নির্বাচিত স্থানের ভিউপোর্টে স্থাপন করা হয়, ফলে এটি দৃশ্যমান হয়।
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) ব্যবহার করে দেখুন, যা আপনার স্থান আবিষ্কারের ব্যবহারিক ক্ষেত্রগুলির সাথে তাদের মিথস্ক্রিয়াকে আরও উন্নত করবে।
অবদানকারীরা
হেনরিক ভালভ | ডেভএক্স ইঞ্জিনিয়ার