উদ্দেশ্য
এই নথিটি Google মানচিত্র প্ল্যাটফর্ম ব্যবহার করে একটি ইন্টারেক্টিভ স্টোর ফাইন্ডার অ্যাপ্লিকেশান তৈরি করার মূল পদক্ষেপের মধ্য দিয়ে চলে, বিশেষ করে মানচিত্র জাভাস্ক্রিপ্ট API এবং স্থান UI কিট: স্থানের বিবরণ উপাদান । আপনি শিখবেন কীভাবে একটি মানচিত্র তৈরি করতে হয় যা স্টোরের অবস্থানগুলি প্রদর্শন করে, দৃশ্যমান স্টোরগুলির একটি তালিকা গতিশীলভাবে আপডেট করে এবং প্রতিটি দোকানের জন্য সমৃদ্ধ স্থানের তথ্য প্রদর্শন করে৷
পূর্বশর্ত
নিম্নলিখিতগুলির সাথে পরিচিতি সুপারিশ করা হয়:
- Maps JavaScript API - আপনার পৃষ্ঠায় একটি মানচিত্র দেখাতে এবং Places UI Kit আমদানি করতে ব্যবহৃত হয়।
- উন্নত মার্কার - মানচিত্রে চিহ্নিতকারী প্রদর্শন করতে ব্যবহৃত হয়।
- স্থান UI কিট - UI-তে আপনার স্টোরের তথ্য প্রদর্শন করতে ব্যবহৃত হয়।
আপনার প্রকল্পে Maps JavaScript API এবং Places UI Kit সক্ষম করুন৷
শুরু করার আগে আপনি মানচিত্র জাভাস্ক্রিপ্ট API লোড করেছেন এবং উন্নত মার্কার এবং স্থান UI কিটের জন্য প্রয়োজনীয় লাইব্রেরি আমদানি করেছেন তা যাচাই করুন। এই ডকুমেন্টটি HTML, CSS, এবং JavaScript সহ ওয়েব ডেভেলপমেন্টের কাজের জ্ঞানও অনুমান করে।
প্রাথমিক সেটআপ
প্রথম ধাপ হল পৃষ্ঠায় একটি মানচিত্র যোগ করা। এই মানচিত্রটি আপনার দোকানের অবস্থানগুলির সাথে সম্পর্কিত পিনগুলি প্রদর্শন করতে ব্যবহার করা হবে৷
একটি পৃষ্ঠায় একটি মানচিত্র যোগ করার দুটি উপায় আছে:
- একটি gmp-map HTML ওয়েব উপাদান ব্যবহার করে
- জাভাস্ক্রিপ্ট ব্যবহার করে
আপনার ব্যবহারের ক্ষেত্রে সবচেয়ে ভালো কাজ করে এমন পদ্ধতি বেছে নিন। মানচিত্র বাস্তবায়নের উভয় উপায় এই গাইডের সাথে কাজ করবে।
ডেমো
এই ডেমোটি উপসাগরীয় অঞ্চলে Google অফিসের অবস্থানগুলি প্রদর্শন করে দোকান অনুসন্ধানকারীর একটি উদাহরণ দেখায়৷ প্রতিটি অবস্থানের জন্য কিছু উদাহরণ বৈশিষ্ট্যের পাশাপাশি স্থানের বিশদ উপাদানটি দেখানো হয়।
লোড এবং প্রদর্শন দোকান অবস্থান
এই বিভাগে, আমরা মানচিত্রে আপনার স্টোরের ডেটা লোড এবং প্রদর্শন করব। এই গাইডটি অনুমান করে যে আপনার কাছে আপনার বিদ্যমান স্টোরগুলি সম্পর্কে তথ্যের ভান্ডার রয়েছে যা থেকে টানতে হবে। আপনার স্টোর ডেটা বিভিন্ন উৎস থেকে আসতে পারে, যেমন আপনার ডাটাবেস। এই উদাহরণের জন্য, আমরা একটি স্থানীয় JSON ফাইল ( stores.json ) ধরে নিই যেখানে স্টোর অবজেক্টের একটি অ্যারে রয়েছে, প্রতিটি একটি স্টোরের অবস্থান উপস্থাপন করে। প্রতিটি বস্তুর অন্তত একটি name , location ( lat এবং lng সহ), এবং একটি place_id থাকা উচিত।
আপনার দোকানের অবস্থানগুলির জন্য প্লেস আইডিগুলি পুনরুদ্ধার করার বিভিন্ন উপায় রয়েছে যদি আপনার কাছে আগে থেকে না থাকে৷ আরও তথ্যের জন্য প্লেস আইডি ডকুমেন্টেশন দেখুন।
আপনার stores.json ফাইলে একটি উদাহরণ স্টোরের বিবরণ এন্ট্রি এইরকম দেখতে পারে। নাম, অবস্থান (lat/lng), এবং স্থান আইডির জন্য ক্ষেত্র রয়েছে৷ দোকান খোলার সময় ধরে রাখার জন্য একটি বস্তু আছে (ছাঁটা)। স্টোরের অবস্থানের বেসপোক বৈশিষ্ট্যগুলি বর্ণনা করতে সহায়তা করার জন্য দুটি বুলিয়ান মানও রয়েছে।
{
"name": "Example Store Alpha",
"location": { "lat": 51.51, "lng": -0.12 },
"place_id": "YOUR_STORE_PLACE_ID",
"opening_hours": { "Monday": "09:00 - 17:00", "...": "..." },
"new_store_design": true,
"indoor_seating": false
}
আপনার জাভাস্ক্রিপ্ট কোডে, আপনার দোকানের অবস্থানগুলির জন্য ডেটা আনুন এবং প্রতিটির জন্য মানচিত্রে একটি পিন প্রদর্শন করুন৷
এটি কিভাবে করতে হয় তার একটি উদাহরণ নিম্নরূপ। এই ফাংশনটি স্টোরের বিশদ বিবরণ সহ একটি বস্তু নেয় এবং প্রতিটির অবস্থানের উপর ভিত্তি করে একটি মার্কার তৈরি করে।
function displayInitialMarkers(storeLocations) {
if (!AdvancedMarkerElement || !LatLng || !mapElement) return;
storeLocations.forEach(store => {
if (store.location) {
const marker = new AdvancedMarkerElement({
position: new LatLng(store.location.lat, store.location.lng),
title: store.name
});
mapElement.appendChild(marker);
}
});
}
একবার আপনি আপনার স্টোরগুলি লোড করে ফেললে এবং মানচিত্রে প্রদর্শিত তাদের অবস্থানগুলিকে উপস্থাপন করে পিনগুলি থাকলে, আপনার ব্যক্তিগত স্টোরের বিবরণ প্রদর্শন করতে HTML এবং CSS ব্যবহার করে একটি সাইডবার তৈরি করুন৷
আপনার স্টোর লোকেটার এই পর্যায়ে কীভাবে দেখতে পারে তার একটি উদাহরণ নিম্নরূপ:
মানচিত্র ভিউপোর্ট পরিবর্তনের জন্য শুনুন
পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা অপ্টিমাইজ করতে, সাইডবারে মার্কার এবং বিশদগুলি প্রদর্শন করতে আপনার অ্যাপ্লিকেশনটি আপডেট করুন যখন তাদের সংশ্লিষ্ট অবস্থানগুলি দৃশ্যমান মানচিত্র এলাকার (ভিউপোর্ট) মধ্যে থাকে। এতে মানচিত্র ভিউপোর্ট পরিবর্তনের জন্য শোনা, এই ইভেন্টগুলিকে ডিবাউন্স করা এবং তারপর শুধুমাত্র প্রয়োজনীয় মার্কারগুলি পুনরায় অঙ্কন করা জড়িত৷
মানচিত্রের নিষ্ক্রিয় ইভেন্টে একটি ইভেন্ট শ্রোতাকে সংযুক্ত করুন৷ আপনার গণনার জন্য একটি স্থিতিশীল ভিউপোর্ট প্রদান করে কোনো প্যানিং বা জুমিং অপারেশন সম্পন্ন হওয়ার পর এই ইভেন্টটি চালু হয়।
map.addListener('idle', debounce(updateMarkersInView, 300));
উপরের কোড স্নিপেট idle ইভেন্টের জন্য শোনে, এবং একটি debounce ফাংশন কল করে। একটি ডিবাউন্স ফাংশন ব্যবহার করা নিশ্চিত করে যে আপনার মার্কার আপডেট লজিক শুধুমাত্র তখনই চলে যখন ব্যবহারকারী একটি স্বল্প সময়ের জন্য মানচিত্রের সাথে ইন্টারঅ্যাক্ট করা বন্ধ করে দেয়, কর্মক্ষমতা উন্নত করে।
function debounce(func, delay) {
let timeoutId;
return function(...args) {
const context = this;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
উপরের কোড একটি উদাহরণ debounce ফাংশন. এটি একটি ফাংশন এবং বিলম্ব যুক্তি নেয়, যা নিষ্ক্রিয় শ্রোতাদের মধ্যে পাস হতে দেখা যায়। UI-তে একটি লক্ষণীয় বিলম্ব যোগ না করে মানচিত্রটি সরানো বন্ধ করার জন্য অপেক্ষা করার জন্য একটি 300ms বিলম্ব যথেষ্ট। একবার এই সময়সীমা শেষ হয়ে গেলে, পাস করা ফাংশনটিকে বলা হয়, এই ক্ষেত্রে, updateMarkersInView ।
updateMarkersInView ফাংশন নিম্নলিখিত কর্ম সম্পাদন করা উচিত:
মানচিত্র থেকে সমস্ত বিদ্যমান মার্কার সাফ করুন
দোকানের অবস্থান বর্তমান মানচিত্রের সীমার মধ্যে পড়ে কিনা তা পরীক্ষা করুন, উদাহরণস্বরূপ:
if (map.getBounds().contains(storeLatLng)) {
// logic
}
উপরের if বিবৃতির মধ্যে, মার্কারগুলি প্রদর্শন করতে কোড লিখুন এবং সাইড বারে স্টোরের বিশদ বিবরণ দিন, যদি স্টোরের অবস্থান ম্যাপ ভিউপোর্টের মধ্যে পড়ে।
স্থান বিবরণ উপাদান ব্যবহার করে সমৃদ্ধ স্থান বিবরণ প্রদর্শন করুন
এই পর্যায়ে, অ্যাপ্লিকেশনটি সমস্ত স্টোরের অবস্থানগুলি প্রদর্শন করে এবং ব্যবহারকারীরা মানচিত্র ভিউপোর্টের উপর ভিত্তি করে সেগুলি ফিল্টার করতে পারে৷ এটিকে উন্নত করার জন্য, প্রতিটি দোকানের সমৃদ্ধ বিবরণ, যেমন ফটো, পর্যালোচনা এবং অ্যাক্সেসযোগ্যতার তথ্য, স্থানের বিবরণ উপাদান ব্যবহার করে যোগ করা হয়। এই উদাহরণটি বিশেষভাবে স্থানের বিবরণ কমপ্যাক্ট উপাদান ব্যবহার করে।
আপনার ডেটা উৎসের প্রতিটি দোকানের অবস্থানের একটি সংশ্লিষ্ট স্থান আইডি থাকতে হবে। এই আইডিটি Google Maps-এ অবস্থানটিকে স্বতন্ত্রভাবে শনাক্ত করে এবং এর বিশদ বিবরণ আনার জন্য অপরিহার্য। আপনি সাধারণত আগে থেকেই এই প্লেস আইডিগুলি অর্জন করবেন এবং আপনার প্রতিটি স্টোর রেকর্ডের সাথে এগুলি সংরক্ষণ করবেন৷
অ্যাপ্লিকেশানে স্থানের বিবরণ কমপ্যাক্ট উপাদান একত্রিত করুন
যখন একটি দোকান বর্তমান মানচিত্র ভিউপোর্টের মধ্যে থাকার জন্য নির্ধারিত হয় এবং সাইডবারে রেন্ডার করা হচ্ছে, আপনি গতিশীলভাবে এটির জন্য একটি স্থানের বিবরণ কমপ্যাক্ট উপাদান তৈরি এবং সন্নিবেশ করতে পারেন।
বর্তমান স্টোর প্রক্রিয়াকরণের জন্য, আপনার ডেটা থেকে প্লেস আইডি পুনরুদ্ধার করুন। প্লেস আইডি কোন স্থানে উপাদানটি প্রদর্শন করবে তা নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
জাভাস্ক্রিপ্টে, গতিশীলভাবে PlaceDetailsCompactElement এর একটি উদাহরণ তৈরি করুন। একটি নতুন PlaceDetailsPlaceRequestElement ও তৈরি করা হয়েছে, এটিতে স্থানের আইডি দেওয়া হয়েছে এবং এটি PlaceDetailsCompactElement এ যুক্ত করা হয়েছে। অবশেষে, উপাদানটি প্রদর্শন করবে এমন সামগ্রী কনফিগার করতে PlaceContentConfigElement ব্যবহার করুন।
নিম্নলিখিত ফাংশনটি অনুমান করে যে প্রয়োজনীয় প্লেস UI কিট লাইব্রেরিগুলি আমদানি করা হয়েছে এবং সেই সুযোগে উপলব্ধ যেখানে এই ফাংশনটি বলা হয়েছে, এবং ফাংশনে পাঠানো storeData place_id রয়েছে।
এই ফাংশনটি উপাদানটি ফিরিয়ে দেবে, এবং কলিং কোড এটিকে DOM-এ যুক্ত করার জন্য দায়ী থাকবে।
function createPlaceDetailsCompactElement(storeData) {
// Create the main details component
const detailsCompact = new PlaceDetailsCompactElement();
detailsCompact.setAttribute('orientation', 'vertical'); // Or 'horizontal'
// Specify the Place ID
const placeRequest = new PlaceDetailsPlaceRequestElement();
placeRequest.place = storeData.place_id;
detailsCompact.appendChild(placeRequest);
// Configure which content elements to display
const contentConfig = new PlaceContentConfigElement();
// For this example, we'll render media, rating, accessibility, and attribution:
contentConfig.appendChild(new PlaceMediaElement({ lightboxPreferred: true }));
contentConfig.appendChild(new PlaceRatingElement());
contentConfig.appendChild(new PlaceAccessibleEntranceIconElement());
// Configure attribution
const placeAttribution = new PlaceAttributionElement();
placeAttribution.setAttribute('light-scheme-color', 'gray');
placeAttribution.setAttribute('dark-scheme-color', 'gray');
contentConfig.appendChild(placeAttribution);
detailsCompact.appendChild(contentConfig);
// Return the element
return detailsCompact;
}
উপরের উদাহরণ কোডে, উপাদানটি স্থানের ফটো, পর্যালোচনা রেটিং এবং অ্যাক্সেসযোগ্যতার তথ্য প্রদর্শনের জন্য কনফিগার করা হয়েছে৷ অন্যান্য উপলভ্য বিষয়বস্তু উপাদান যোগ করে বা সরিয়ে দিয়ে এটি কাস্টমাইজ করা যেতে পারে, সমস্ত উপলব্ধ বিকল্পের জন্য PlaceContentConfigElement ডকুমেন্টেশন দেখুন।
স্থানের বিবরণ কমপ্যাক্ট এলিমেন্ট CSS কাস্টম বৈশিষ্ট্যের মাধ্যমে স্টাইলিং সমর্থন করে। এটি আপনাকে আপনার অ্যাপ্লিকেশনের ডিজাইনের সাথে মেলে এর চেহারা (রঙ, ফন্ট, ইত্যাদি) সাজাতে দেয়। আপনার CSS ফাইলে এই কাস্টম বৈশিষ্ট্যগুলি প্রয়োগ করুন। সমর্থিত CSS বৈশিষ্ট্যগুলির জন্য PlaceDetailsCompactElement এর রেফারেন্স ডকুমেন্টেশন দেখুন।
আপনার আবেদন এই পর্যায়ে দেখতে কেমন হতে পারে তার একটি উদাহরণ:
স্টোর ফাইন্ডার উন্নত করুন
আপনি আপনার স্টোর ফাইন্ডার অ্যাপ্লিকেশনের জন্য একটি শক্ত ভিত্তি তৈরি করেছেন। এখন, এর কার্যকারিতা প্রসারিত করার এবং আরও সমৃদ্ধ, আরও ব্যবহারকারী-কেন্দ্রিক অভিজ্ঞতা তৈরি করার বিভিন্ন উপায় বিবেচনা করুন।
স্বয়ংসম্পূর্ণ যোগ করুন
প্লেস স্বয়ংসম্পূর্ণের সাথে একটি অনুসন্ধান ইনপুট সংহত করে ব্যবহারকারীরা কীভাবে স্টোর অনুসন্ধানের জন্য এলাকাগুলি খুঁজে পান তা উন্নত করুন৷ যখন ব্যবহারকারীরা একটি ঠিকানা, আশেপাশের বা আগ্রহের স্থান টাইপ করে এবং একটি পরামর্শ নির্বাচন করে, তখন মানচিত্রটিকে স্বয়ংক্রিয়ভাবে সেই অবস্থানে কেন্দ্রীভূত করার জন্য প্রোগ্রাম করে, কাছাকাছি দোকানগুলির একটি আপডেট ট্রিগার করে৷ একটি ইনপুট ক্ষেত্র যোগ করে এবং এটিতে স্থান স্বয়ংসম্পূর্ণ কার্যকারিতা সংযুক্ত করে এটি অর্জন করুন। একটি পরামর্শ নির্বাচন করার সময়, মানচিত্রটি সেই বিন্দুতে কেন্দ্রীভূত হতে পারে। এটিকে পক্ষপাতিত্বের জন্য কনফিগার করতে বা আপনার অপারেশনাল এলাকায় ফলাফল সীমাবদ্ধ করতে মনে রাখবেন।
অবস্থান সনাক্ত করুন
তাৎক্ষণিক প্রাসঙ্গিকতা অফার করুন, বিশেষ করে মোবাইল ব্যবহারকারীদের জন্য, তাদের বর্তমান ভৌগলিক অবস্থান সনাক্ত করার কার্যকারিতা প্রয়োগ করে। তাদের অবস্থান সনাক্ত করার জন্য ব্রাউজার অনুমতি পাওয়ার পরে, স্বয়ংক্রিয়ভাবে মানচিত্রটিকে তাদের অবস্থানের উপর কেন্দ্রীভূত করুন এবং নিকটতম স্টোরগুলি প্রদর্শন করুন৷ অবিলম্বে বিকল্পগুলির সন্ধান করার সময় ব্যবহারকারীরা আমার কাছের এই বৈশিষ্ট্যটিকে অত্যন্ত মূল্য দেয়৷ অবস্থান অ্যাক্সেসের অনুরোধ করতে একটি বোতাম বা একটি প্রাথমিক প্রম্পট যোগ করুন।
দূরত্ব এবং দিকনির্দেশ দেখান
একবার একজন ব্যবহারকারী আগ্রহের দোকান শনাক্ত করলে, Routes API একত্রিত করে তাদের যাত্রা উল্লেখযোগ্যভাবে উন্নত করুন। আপনার তালিকাভুক্ত প্রতিটি দোকানের জন্য, ব্যবহারকারীর বর্তমান অবস্থান বা অনুসন্ধান করা অবস্থান থেকে দূরত্ব গণনা করুন এবং প্রদর্শন করুন৷ উপরন্তু, ব্যবহারকারীর অবস্থান থেকে নির্বাচিত দোকানে একটি রুট তৈরি করতে Routes API ব্যবহার করে এমন একটি বোতাম বা লিঙ্ক প্রদান করুন। তারপরে আপনি আপনার মানচিত্রে এই রুটটি প্রদর্শন করতে পারেন বা নেভিগেশনের জন্য Google মানচিত্রের সাথে লিঙ্ক করতে পারেন, একটি দোকান খোঁজা থেকে প্রকৃতপক্ষে সেখানে পৌঁছানোর জন্য একটি বিরামহীন রূপান্তর তৈরি করে৷
এই এক্সটেনশনগুলি বাস্তবায়নের মাধ্যমে, আপনি একটি আরও ব্যাপক এবং সুবিধাজনক স্টোর লোকেটার তৈরি করতে Google মানচিত্র প্ল্যাটফর্মের আরও ক্ষমতা ব্যবহার করতে পারেন যা সাধারণ ব্যবহারকারীর চাহিদাগুলি সরাসরি পূরণ করে৷
উপসংহার
এই গাইডটি একটি ইন্টারেক্টিভ স্টোর ফাইন্ডার তৈরি করার মূল পদক্ষেপগুলি প্রদর্শন করেছে। আপনি শিখেছেন কিভাবে মানচিত্র জাভাস্ক্রিপ্ট API ব্যবহার করে একটি মানচিত্রে আপনার নিজস্ব স্টোরের অবস্থানগুলি প্রদর্শন করতে হয়, ভিউপোর্ট পরিবর্তনের উপর ভিত্তি করে দৃশ্যমান স্টোরগুলিকে গতিশীলভাবে আপডেট করতে হয় এবং উল্লেখযোগ্যভাবে, স্থান UI কিটের সাথে সামঞ্জস্য রেখে কীভাবে আপনার নিজস্ব স্টোরের ডেটা প্রদর্শন করতে হয়৷ প্লেস ডিটেইলস এলিমেন্ট সহ প্লেস আইডি সহ আপনার বিদ্যমান স্টোরের তথ্য ব্যবহার করে, আপনি আপনার প্রতিটি অবস্থানের জন্য সমৃদ্ধ, প্রমিত বিবরণ উপস্থাপন করতে পারেন, একটি ব্যবহারকারী-বান্ধব স্টোর লোকেটারের জন্য একটি শক্তিশালী ভিত্তি তৈরি করতে পারেন।
অত্যাধুনিক অবস্থান-ভিত্তিক অ্যাপ্লিকেশন দ্রুত বিকাশের জন্য শক্তিশালী, উপাদান-ভিত্তিক সরঞ্জামগুলি অফার করতে মানচিত্র জাভাস্ক্রিপ্ট API এবং স্থান UI কিট ব্যবহার করে দেখুন। এই বৈশিষ্ট্যগুলিকে একত্রিত করে, আপনি আপনার ব্যবহারকারীদের জন্য আকর্ষণীয় এবং তথ্যপূর্ণ অভিজ্ঞতা তৈরি করতে পারেন৷
অবদানকারী
হেনরিক ভালভ | ডেভএক্স ইঞ্জিনিয়ার