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

मकसद

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

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

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

• Maps JavaScript API - इसका इस्तेमाल, आपके पेज पर मैप दिखाने और Places UI Kit को इंपोर्ट करने के लिए किया जाता है.
• ऐडवांस मार्कर - इनका इस्तेमाल, मैप पर मार्कर दिखाने के लिए किया जाता है.
• Places UI Kit - इसका इस्तेमाल, यूज़र इंटरफ़ेस (यूआई) में अपने स्टोर की जानकारी दिखाने के लिए किया जाता है.

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

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

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

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

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

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

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

डेमो

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

स्टोर ढूंढने की सुविधा को बेहतर बनाना

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

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

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

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

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

दूरी और दिशाएं दिखाएं

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

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

नतीजा

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

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

योगदानकर्ता

हेनरिक वाल्व | DevX इंजीनियर