Places UI Kit-এর মাধ্যমে স্টোর খোঁজা

উদ্দেশ্য

এই ডকুমেন্টটি Google Maps Platform, বিশেষ করে Maps JavaScript API এবং Places UI Kit: জায়গার বিবরণ এলিমেন্ট ব্যবহার করে একটি ইন্টারেক্টিভ স্টোর ফাইন্ডার অ্যাপ্লিকেশন ডেভেলপ করার মূল ধাপগুলি সম্পর্কে আলোচনা করে। আপনি জানতে পারবেন কীভাবে এমন একটি ম্যাপ তৈরি করতে হয় যা স্টোরের লোকেশন দেখায়, দৃশ্যমান স্টোরের একটি তালিকা ডায়নামিকভাবে আপডেট করে এবং প্রতিটি স্টোরের জন্য সমৃদ্ধ স্থানের তথ্য প্রদর্শন করে।

পূর্বশর্ত

নিম্নলিখিত বিষয়গুলির সাথে পরিচিত হওয়া সাজেস্ট করা হয়:

• Maps JavaScript API - আপনার পৃষ্ঠায় ম্যাপ দেখাতে এবং Places UI Kit ইমপোর্ট করতে ব্যবহার করা হয়।
• উন্নত মার্কার - ম্যাপে মার্কার দেখানোর জন্য ব্যবহার করা হয়।
• Places UI Kit - UI-তে আপনার স্টোর সম্পর্কে তথ্য দেখানোর জন্য ব্যবহার করা হয়।

আপনার প্রোজেক্টে Maps JavaScript API এবং Places UI Kit চালু করুন।

শুরু করার আগে, আপনি Maps JavaScript API লোড করেছেন এবং উন্নত মার্কার ও Places UI কিট-এর জন্য প্রয়োজনীয় লাইব্রেরি ইমপোর্ট করেছেন কিনা তা যাচাই করুন। এই ডকুমেন্টটি ধরে নেয় যে আপনার HTML, CSS এবং JavaScript সহ ওয়েব ডেভেলপমেন্ট সম্পর্কে কার্যকরী জ্ঞান আছে।

প্রাথমিক সেট-আপ

প্রথম ধাপ হল পৃষ্ঠায় ম্যাপ যোগ করা। আপনার স্টোরের লোকেশন সম্পর্কিত পিন দেখানোর জন্য এই ম্যাপ ব্যবহার করা হবে।

কোনও পৃষ্ঠায় ম্যাপ যোগ করার দুটি উপায় আছে:

1. gmp-map HTML ওয়েব কম্পোনেন্ট ব্যবহার করা
2. JavaScript ব্যবহার করে

আপনার ব্যবহারের ক্ষেত্রে সবচেয়ে উপযুক্ত পদ্ধতি বেছে নিন। ম্যাপ প্রয়োগ করার দুটি পদ্ধতিই এই নির্দেশিকার সাথে কাজ করবে।

স্টোরের লোকেশন লোড ও ডিসপ্লে করা

এই বিভাগে, আমরা ম্যাপে আপনার স্টোরের ডেটা লোড করব এবং দেখাব। এই নির্দেশিকা ধরে নেয় যে আপনার কাছে আগে থেকে থাকা স্টোর সম্পর্কে তথ্যের একটি রিপোজিটরি আছে যেখান থেকে তথ্য নেওয়া যাবে। আপনার স্টোরের ডেটা বিভিন্ন সোর্স থেকে আসতে পারে, যেমন আপনার ডেটাবেস। এই উদাহরণের জন্য, আমরা ধরে নিচ্ছি যে স্টোর অবজেক্টের অ্যারে সহ একটি লোকাল JSON ফাইল (stores.json) আছে, যার প্রতিটি একটি করে স্টোর লোকেশনকে দেখায়। প্রতিটি অবজেক্টে অন্তত একটি name, location (lat এবং lng সহ) এবং একটি place_id থাকতে হবে।

আপনার স্টোরের লোকেশনের জন্য প্লেস আইডি খুঁজে পাওয়ার বিভিন্ন উপায় আছে, যদি আপনার কাছে আগে থেকে এটি না থাকে। আরও তথ্যের জন্য প্লেস আইডি ডকুমেন্টেশন দেখুন।

আপনার stores.json ফাইলে স্টোরের বিবরণ সংক্রান্ত এন্ট্রি এইরকম দেখতে হতে পারে। নাম, লোকেশন (অক্ষাংশ/দ্রাঘিমাংশ) এবং প্লেস আইডির জন্য ফিল্ড আছে। There's an object to hold the store opening hours (truncated). এছাড়াও, স্টোর লোকেশনের কাস্টমাইজ করা ফিচার বর্ণনা করতে সাহায্য করার জন্য দুটি বুলিয়ান মান রয়েছে।

{
  "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
}

আপনার JavaScript কোডে, আপনার স্টোরের লোকেশনের ডেটা ফেচ করুন এবং প্রতিটির জন্য ম্যাপে একটি পিন দেখুন।

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

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);
    };
}

উপরের কোডটি হল ডিবাউন্স ফাংশনের একটি উদাহরণ। এটি একটি ফাংশন এবং বিলম্ব আর্গুমেন্ট নেয়, যা নিষ্ক্রিয় শ্রোতার মধ্যে পাস করা দেখা যেতে পারে। ম্যাপের মুভমেন্ট বন্ধ হওয়ার জন্য ৩০০ মিলিসেকেন্ড অপেক্ষা করাই যথেষ্ট, এর ফলে UI-তে কোনও লক্ষণীয় বিলম্ব হয় না। এই টাইমআউটের মেয়াদ শেষ হয়ে গেলে, পাস করা ফাংশন কল করা হয়, এই ক্ষেত্রে, updateMarkersInView।

updateMarkersInView ফাংশনের নিম্নলিখিত অ্যাকশনগুলি পারফর্ম করা উচিত:

ম্যাপ থেকে আগে থেকে থাকা সব মার্কার মুছে দিন

স্টোরের লোকেশন বর্তমান ম্যাপ বাউন্ডের মধ্যে পড়ে কিনা তা চেক করুন, যেমন:

if (map.getBounds().contains(storeLatLng)) {
  // logic
}

উপরের if স্টেটমেন্টের মধ্যে, স্টোরের লোকেশন ম্যাপ ভিউপোর্টের মধ্যে থাকলে, সাইড বারে মার্কার দেখাতে এবং স্টোরের বিবরণ স্টোর করতে কোড লিখুন।

Place Details Element ব্যবহার করে জায়গার বিবরণ আরও ভালোভাবে দেখানো

এই পর্যায়ে, অ্যাপ্লিকেশনটি সব স্টোরের লোকেশন দেখায় এবং ব্যবহারকারীরা ম্যাপ ভিউপোর্টের ভিত্তিতে সেগুলি ফিল্টার করতে পারেন। এটি উন্নত করতে, প্রতিটি স্টোর সম্পর্কে বিস্তারিত তথ্য, যেমন ফটো, রিভিউ এবং অ্যাক্সেসিবিলিটি তথ্য, Place Details Element ব্যবহার করে যোগ করা হয়। এই উদাহরণটি বিশেষভাবে জায়গার বিবরণ কমপ্যাক্ট এলিমেন্ট ব্যবহার করে।

আপনার ডেটা সোর্সে প্রতিটি স্টোর লোকেশনের জন্য একটি করে প্লেস আইডি থাকতে হবে। এই আইডি Google Maps-এ লোকেশনকে অনন্যভাবে শনাক্ত করে এবং এর বিবরণ আনার জন্য এটি প্রয়োজনীয়। সাধারণত, আপনি আগেই এইসব প্লেস আইডি পেয়ে যাবেন এবং আপনার প্রতিটি স্টোরের রেকর্ডের সাথে এগুলি স্টোর করবেন।

অ্যাপ্লিকেশনে Place Details Compact Element ইন্টিগ্রেট করুন

যখন কোনও স্টোর বর্তমান ম্যাপ ভিউপোর্টের মধ্যে আছে বলে নির্ধারণ করা হয় এবং সাইডবারে রেন্ডার করা হয়, তখন আপনি এটির জন্য একটি জায়গার বিবরণ কম্প্যাক্ট এলিমেন্ট ডাইনামিকভাবে তৈরি এবং সন্নিবেশ করতে পারেন।

বর্তমানে যে স্টোর প্রসেস করা হচ্ছে, আপনার ডেটা থেকে সেটির প্লেস আইডি খুঁজে নিন। কোন জায়গায় এলিমেন্ট দেখানো হবে তা নিয়ন্ত্রণ করতে প্লেস আইডি ব্যবহার করা হয়।

জাভাস্ক্রিপ্টে, ডায়নামিকভাবে PlaceDetailsCompactElement-এর ইনস্ট্যান্স তৈরি করুন। এছাড়াও, একটি নতুন PlaceDetailsPlaceRequestElement তৈরি করা হয়, এতে জায়গার আইডি পাস করা হয় এবং এটি PlaceDetailsCompactElement-এর সাথে যোগ করা হয়। শেষে, এলিমেন্ট যে কন্টেন্ট দেখাবে তা কনফিগার করতে PlaceContentConfigElement ব্যবহার করুন।

নিম্নলিখিত ফাংশন ধরে নেয় যে প্রয়োজনীয় Place UI Kit লাইব্রেরি ইমপোর্ট করা হয়েছে এবং যে স্কোপে এই ফাংশন কল করা হয়েছে সেখানে উপলভ্য আছে এবং 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 Maps-এ লিঙ্ক করতে পারেন, স্টোর খোঁজা থেকে শুরু করে সেখানে পৌঁছানো পর্যন্ত একটি নিরবচ্ছিন্ন ট্রানজিশন তৈরি করতে পারেন।

এইসব এক্সটেনশন প্রয়োগ করে, আপনি Google Maps Platform-এর আরও বেশি ক্ষমতা ব্যবহার করতে পারবেন, যাতে আরও ব্যাপক ও সুবিধাজনক স্টোর লোকেটর তৈরি করা যায়, যা সরাসরি ব্যবহারকারীর সাধারণ প্রয়োজন পূরণ করে।

উপসংহার

এই নির্দেশিকাটি একটি ইন্টারেক্টিভ স্টোর ফাইন্ডার তৈরি করার মূল পদক্ষেপগুলি প্রদর্শন করেছে। Maps JavaScript API ব্যবহার করে ম্যাপে আপনার নিজের স্টোরের লোকেশন কীভাবে দেখাবেন, ভিউপোর্ট পরিবর্তনের উপর ভিত্তি করে দৃশ্যমান স্টোরগুলি কীভাবে ডাইনামিকভাবে আপডেট করবেন এবং উল্লেখযোগ্যভাবে, Places UI Kit-এর সাথে সামঞ্জস্য রেখে আপনার নিজের স্টোরের ডেটা কীভাবে দেখাবেন তা আপনি শিখেছেন। আপনার স্টোরের বর্তমান তথ্য, যেমন প্লেস আইডি, Place Details Element-এর সাথে ব্যবহার করে, আপনি প্রতিটি লোকেশনের জন্য সমৃদ্ধ, মানসম্মত বিবরণ উপস্থাপন করতে পারেন। এটি ব্যবহারকারীদের জন্য একটি সহজ স্টোর লোকেটর তৈরি করতে সাহায্য করে।

Maps JavaScript API এবং Places UI Kit ব্যবহার করে দেখুন, যাতে লোকেশন-ভিত্তিক জটিল অ্যাপ্লিকেশন দ্রুত ডেভেলপ করার জন্য শক্তিশালী, কম্পোনেন্ট-ভিত্তিক টুল অফার করা যায়। এইসব ফিচার একত্রিত করে, আপনি ব্যবহারকারীদের জন্য আকর্ষণীয় ও তথ্যপূর্ণ অভিজ্ঞতা তৈরি করতে পারবেন।

অবদানকারী

হেনরিক ভালভ | DevX ইঞ্জিনিয়ার