जगहों की जानकारी देने वाली यूआई किट की मदद से, स्टोर ढूंढने की सुविधा का इंटरैक्टिव वर्शन बनाना

मकसद

इस दस्तावेज़ में, Google Maps Platform का इस्तेमाल करके स्टोर ढूंढने वाला इंटरैक्टिव ऐप्लिकेशन बनाने के मुख्य चरणों के बारे में बताया गया है. खास तौर पर, Maps JavaScript API और Places UI Kit: जगह की जानकारी वाले एलिमेंट का इस्तेमाल करके. आपको स्टोर की जगहें दिखाने वाला मैप बनाने का तरीका पता चलेगा. साथ ही, दिखने वाले स्टोर की सूची को डाइनैमिक तौर पर अपडेट करने और हर स्टोर के लिए जगह की ज़्यादा जानकारी दिखाने का तरीका भी पता चलेगा.

ज़रूरी शर्तें

हमारा सुझाव है कि आप इनके बारे में जान लें:

अपने प्रोजेक्ट में Maps JavaScript API और Places UI Kit चालू करें.

शुरू करने से पहले, पुष्टि करें कि आपने Maps JavaScript API लोड किया है और ऐडवांस मार्कर और Places UI Kit के लिए ज़रूरी लाइब्रेरी इंपोर्ट की हैं. इस दस्तावेज़ में यह भी माना गया है कि आपके पास वेब डेवलपमेंट के बारे में जानकारी है. इसमें एचटीएमएल, सीएसएस, और JavaScript शामिल हैं.

शुरुआती सेट अप

सबसे पहले, पेज में मैप जोड़ें. इस मैप का इस्तेमाल, आपके स्टोर की जगहों से जुड़े पिन दिखाने के लिए किया जाएगा.

किसी पेज में मैप जोड़ने के दो तरीके हैं:

  1. gmp-map एचटीएमएल वेब कॉम्पोनेंट का इस्तेमाल करना
  2. JavaScript का इस्तेमाल करना

वह तरीका चुनें जो आपके इस्तेमाल के उदाहरण के हिसाब से सबसे सही हो. इस गाइड में, मैप को लागू करने के दोनों तरीके बताए गए हैं.

डेमो

इस डेमो में, स्टोर फ़ाइंडर की सुविधा के काम करने का उदाहरण दिखाया गया है. इसमें, बे एरिया में Google के ऑफ़िस की जगहें दिखाई गई हैं. जगह की जानकारी वाला एलिमेंट, हर जगह के लिए दिखाया जाता है. साथ ही, इसमें कुछ उदाहरण एट्रिब्यूट भी होते हैं.

स्टोर की जगहें लोड और दिखाना

इस सेक्शन में, हम आपके स्टोर का डेटा मैप पर लोड और दिखाएंगे. इस गाइड में यह माना गया है कि आपके पास अपने मौजूदा स्टोर की जानकारी का एक डेटाबेस है. आपके स्टोर का डेटा, अलग-अलग सोर्स से मिल सकता है. जैसे, आपका डेटाबेस. इस उदाहरण के लिए, हमने एक लोकल JSON फ़ाइल (stores.json) का इस्तेमाल किया है. इसमें स्टोर ऑब्जेक्ट का एक कलेक्शन है. हर ऑब्जेक्ट, स्टोर की एक जगह को दिखाता है. हर ऑब्जेक्ट में कम से कम एक name, location (lat और lng के साथ), और एक place_id होना चाहिए.

अगर आपके पास अपने स्टोर की जगहों के लिए पहले से प्लेस आईडी नहीं हैं, तो उन्हें पाने के कई तरीके हैं. ज़्यादा जानकारी के लिए, Place ID का दस्तावेज़ देखें.

आपकी stores.json फ़ाइल में, स्टोर की जानकारी वाली एंट्री का उदाहरण इस तरह दिख सकता है. इसमें नाम, जगह (अक्षांश/देशांतर), और प्लेस आईडी के लिए फ़ील्ड होते हैं. स्टोर के खुले होने का समय बताने के लिए एक ऑब्जेक्ट है (छोटा किया गया). स्टोर की जगह की खास सुविधाओं के बारे में बताने के लिए, दो बूलियन वैल्यू भी हैं.

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

अपने स्टोर लोड करने और मैप पर उनकी जगहों को दिखाने वाले पिन डालने के बाद, एचटीएमएल और सीएसएस का इस्तेमाल करके एक साइडबार बनाएं. इससे, आपको अपने हर स्टोर के बारे में जानकारी दिखाने में मदद मिलेगी.

इस चरण में, स्टोर लोकेटर कैसा दिख सकता है, इसका उदाहरण यहां दिया गया है:

इमेज

मैप व्यूपोर्ट में होने वाले बदलावों को सुनना

परफ़ॉर्मेंस और उपयोगकर्ता अनुभव को ऑप्टिमाइज़ करने के लिए, अपने ऐप्लिकेशन को अपडेट करें, ताकि साइडबार में मार्कर और जानकारी सिर्फ़ तब दिखे, जब उनकी जगहें मैप के दिखने वाले हिस्से (व्यूपोर्ट) में हों. इसमें, मैप व्यूपोर्ट में होने वाले बदलावों को सुनना, इन इवेंट को डीबाउंस करना, और फिर सिर्फ़ ज़रूरी मार्कर को फिर से बनाना शामिल है.

मैप के आइडल इवेंट में इवेंट लिसनर अटैच करें. यह इवेंट, पैन या ज़ूम करने की प्रोसेस पूरी होने के बाद ट्रिगर होता है. इससे, कैलकुलेशन के लिए एक स्थिर व्यूपोर्ट मिलता है.

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

ऊपर दिया गया कोड, डीबाउन्स फ़ंक्शन का उदाहरण है. इसमें एक फ़ंक्शन और देरी के लिए आर्ग्युमेंट होता है, जिसे आइडल लिसनर में पास किया जा सकता है. यूज़र इंटरफ़ेस (यूआई) में कोई खास देरी किए बिना, मैप के रुकने का इंतज़ार करने के लिए 300 मिलीसेकंड की देरी काफ़ी है. टाइम आउट खत्म होने के बाद, पास किए गए फ़ंक्शन को कॉल किया जाता है. इस मामले में, updateMarkersInView.

updateMarkersInView फ़ंक्शन को ये काम करने चाहिए:

मैप से सभी मौजूदा मार्कर मिटाना

देखें कि स्टोर की जगह, मैप के मौजूदा दायरे में है या नहीं. उदाहरण के लिए:

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

ऊपर दिए गए if स्टेटमेंट में, साइड बार पर मार्कर दिखाने और स्टोर की जानकारी दिखाने के लिए कोड लिखें. ऐसा तब करें, जब स्टोर की जगह मैप व्यूपोर्ट में हो.

जगह की जानकारी वाले एलिमेंट का इस्तेमाल करके, जगह की ज़्यादा जानकारी दिखाना

इस चरण में, ऐप्लिकेशन स्टोर की सभी जगहों को दिखाता है. साथ ही, उपयोगकर्ता मैप व्यूपोर्ट के आधार पर उन्हें फ़िल्टर कर सकते हैं. इसे बेहतर बनाने के लिए, 'जगह की जानकारी' एलिमेंट का इस्तेमाल करके, हर स्टोर के बारे में ज़्यादा जानकारी जोड़ी जाती है. जैसे, फ़ोटो, समीक्षाएं, और सुलभता की जानकारी. इस उदाहरण में खास तौर पर, जगह की जानकारी के लिए कॉम्पैक्ट एलिमेंट का इस्तेमाल किया गया है.

आपके डेटा सोर्स में मौजूद हर स्टोर की जगह के लिए, जगह का आईडी होना चाहिए. यह आईडी, Google Maps पर किसी जगह की खास तौर पर पहचान करता है. साथ ही, इसकी जानकारी पाने के लिए यह ज़रूरी है. आम तौर पर, आपको ये प्लेस आईडी पहले से ही मिल जाते हैं और इन्हें अपने हर स्टोर रिकॉर्ड के लिए सेव किया जाता है.

ऐप्लिकेशन में जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट को इंटिग्रेट करना

जब किसी स्टोर को मैप के मौजूदा व्यूपोर्ट में शामिल किया जाता है और उसे साइडबार में रेंडर किया जाता है, तो उसके लिए जगह की जानकारी वाला कॉम्पैक्ट एलिमेंट डाइनैमिक तौर पर बनाया और डाला जा सकता है.

जिस स्टोर को प्रोसेस किया जा रहा है उसके लिए, अपने डेटा से प्लेस आईडी वापस पाएं. प्लेस आईडी का इस्तेमाल यह कंट्रोल करने के लिए किया जाता है कि एलिमेंट किस जगह दिखेगा.

JavaScript में, PlaceDetailsCompactElement का डाइनैमिक तौर पर इंस्टेंस बनाएं. एक नया PlaceDetailsPlaceRequestElement भी बनाया जाता है, जिसमें जगह का आईडी डाला जाता है और इसे PlaceDetailsCompactElement में जोड़ दिया जाता है. आखिर में, एलिमेंट में दिखने वाले कॉन्टेंट को कॉन्फ़िगर करने के लिए, PlaceContentConfigElement का इस्तेमाल करें.

इस फ़ंक्शन में यह माना जाता है कि ज़रूरी Place UI Kit लाइब्रेरी, उस स्कोप में इंपोर्ट की गई हैं और उपलब्ध हैं जहां इस फ़ंक्शन को कॉल किया जाता है. साथ ही, फ़ंक्शन में पास किए गए storeData में place_id शामिल है.

यह फ़ंक्शन एलिमेंट दिखाएगा और कॉल करने वाले कोड को इसे डीओएम में जोड़ना होगा.

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 दस्तावेज़ देखें.

जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट में, सीएसएस कस्टम प्रॉपर्टी की मदद से स्टाइलिंग की जा सकती है. इससे, अपने ऐप्लिकेशन के डिज़ाइन के हिसाब से, इसके दिखने के तरीके (रंग, फ़ॉन्ट वगैरह) में बदलाव किया जा सकता है. अपनी सीएसएस फ़ाइल में इन कस्टम प्रॉपर्टी को लागू करें. काम करने वाली सीएसएस प्रॉपर्टी के लिए, PlaceDetailsCompactElement के रेफ़रंस दस्तावेज़ देखें.

इस चरण में आपका आवेदन कुछ ऐसा दिख सकता है:

इमेज

स्टोर फ़ाइंडर को बेहतर बनाना

आपने स्टोर फ़ाइंडर ऐप्लिकेशन के लिए एक बेहतरीन आधार तैयार कर लिया है. अब, इसकी सुविधाओं को बेहतर बनाने और उपयोगकर्ताओं के लिए बेहतर अनुभव देने के कई तरीकों पर विचार करें.

ऑटोकंप्लीट की सुविधा जोड़ना

जगह के नाम के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा के साथ खोज इनपुट को इंटिग्रेट करके, उपयोगकर्ताओं को स्टोर खोजने के लिए इलाकों को ढूंढने का बेहतर तरीका दें. जब उपयोगकर्ता कोई पता, आस-पास का इलाका या लोकप्रिय जगह टाइप करते हैं और कोई सुझाव चुनते हैं, तो मैप को उस जगह पर अपने-आप सेंटर करने के लिए प्रोग्राम करें. इससे आस-पास के स्टोर की जानकारी अपने-आप अपडेट हो जाएगी. ऐसा करने के लिए, कोई इनपुट फ़ील्ड जोड़ें और उसमें जगह की जानकारी अपने-आप भरने की सुविधा जोड़ें. किसी सुझाव को चुनने पर, मैप को उस पॉइंट पर सेंटर किया जा सकता है. इसे कॉन्फ़िगर करके, अपने कारोबार के इलाके के हिसाब से नतीजों को सीमित या पसंद के मुताबिक बनाएं.

जगह की जानकारी का पता लगाना

उपयोगकर्ता की मौजूदा जगह का पता लगाने की सुविधा लागू करके, खास तौर पर मोबाइल इस्तेमाल करने वाले लोगों को तुरंत काम की जानकारी दें. उपयोगकर्ता की जगह की जानकारी का पता लगाने के लिए, ब्राउज़र से अनुमति लेने के बाद, मैप को उपयोगकर्ता की जगह के हिसाब से अपने-आप सेंटर में ले जाएं और सबसे नज़दीकी स्टोर दिखाएं. तुरंत विकल्प खोजते समय, उपयोगकर्ता मेरे आस-पास वाली इस सुविधा को बहुत अहमियत देते हैं. जगह की जानकारी का ऐक्सेस पाने का अनुरोध करने के लिए, कोई बटन या शुरुआती प्रॉम्प्ट जोड़ें.

दूरी और निर्देश दिखाना

जब कोई उपयोगकर्ता अपनी पसंद के स्टोर की पहचान कर लेता है, तो Routes API को इंटिग्रेट करके, उसकी खरीदारी की प्रोसेस को बेहतर बनाएं. आपने जिन स्टोर की सूची बनाई है उनके लिए, उपयोगकर्ता की मौजूदा जगह या खोजी गई जगह से दूरी का हिसाब लगाएं और उसे दिखाएं. इसके अलावा, एक बटन या लिंक दें, जो उपयोगकर्ता की जगह से चुने गए स्टोर तक का रास्ता जनरेट करने के लिए, Routes API का इस्तेमाल करता हो. इसके बाद, इस रास्ते को अपने मैप पर दिखाया जा सकता है या नेविगेशन के लिए Google Maps से लिंक किया जा सकता है. इससे, स्टोर ढूंढने से लेकर वहां पहुंचने तक का सफ़र आसान हो जाता है.

इन एक्सटेंशन को लागू करके, Google Maps Platform की ज़्यादा सुविधाओं का इस्तेमाल किया जा सकता है. इससे, स्टोर लोकेटर को ज़्यादा बेहतर और आसान बनाया जा सकता है. यह स्टोर लोकेटर, सीधे तौर पर उपयोगकर्ताओं की ज़रूरतों को पूरा करता है.

नतीजा

इस गाइड में, इंटरैक्टिव स्टोर फ़ाइंडर बनाने के मुख्य चरणों के बारे में बताया गया है. आपने Maps JavaScript API का इस्तेमाल करके, मैप पर अपने स्टोर की जगहों को दिखाने का तरीका जाना है. साथ ही, व्यूपोर्ट में हुए बदलावों के आधार पर दिखने वाले स्टोर को डाइनैमिक तौर पर अपडेट करने का तरीका भी जाना है. सबसे अहम बात, आपने Places UI Kit के हिसाब से अपने स्टोर का डेटा दिखाने का तरीका भी जाना है. जगह की जानकारी वाले एलिमेंट के साथ, अपने स्टोर की मौजूदा जानकारी का इस्तेमाल करके, अपनी हर जगह के लिए बेहतर और स्टैंडर्ड जानकारी दी जा सकती है. इससे, उपयोगकर्ता के लिए स्टोर लोकेटर को बेहतर बनाया जा सकता है.

Maps JavaScript API और Places UI Kit आज़माएं. इनकी मदद से, जगह के हिसाब से काम करने वाले बेहतर ऐप्लिकेशन को तेज़ी से डेवलप करने के लिए, कॉम्पोनेंट पर आधारित बेहतर टूल उपलब्ध कराए जा सकते हैं. इन सुविधाओं को जोड़कर, अपने उपयोगकर्ताओं के लिए दिलचस्प और जानकारी देने वाला अनुभव बनाया जा सकता है.

योगदानकर्ता

Henrik Valve | DevX के इंजीनियर