बेहतर मार्कर और Firebase की मदद से, ग्राहकों को रीयल टाइम में जोड़ें.

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

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

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

अभी आज़माएं: Google Cloud कंसोल पर जाएं और Maps JavaScript API आज़माएं .

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

डाइनैमिक ऐडवांस मार्कर का समाधान

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

पहला चरण - विज़ुअल अनुभव तय करने के लिए एट्रिब्यूट तय करना

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

अगले चरण में, मैप मार्कर पर इंतज़ार के समय को विज़ुअल तौर पर एनोटेट करने के लिए, एक या उससे ज़्यादा मार्कर एट्रिब्यूट चुनें. मार्कर एट्रिब्यूट की सूची, PinElement स्पेसिफ़िकेशन में पहले से मौजूद होती है. पसंद के मुताबिक बनाने के ज़्यादा विकल्पों के लिए, कस्टम एचटीएमएल का भी इस्तेमाल किया जा सकता है.

इस उदाहरण में, हम इंतज़ार के समय के डेटा को विज़ुअलाइज़ करने के लिए, दो मार्कर एट्रिब्यूट का इस्तेमाल करेंगे:

• मार्कर का रंग: इंतज़ार का समय पांच मिनट से कम होने पर नीला, पांच मिनट से ज़्यादा होने पर पीला
• मार्कर कॉन्टेंट (इसके लिए कस्टम एचटीएमएल मार्कर की ज़रूरत होती है): हम मार्कर में ही, इंतज़ार का मौजूदा समय मिनट में शामिल कर देंगे

दूसरा चरण - रीयल-टाइम डेटा सोर्स से कनेक्शन कॉन्फ़िगर करना

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

हमारे ऐप्लिकेशन को सर्वर से इंतज़ार के समय का डेटा ऐक्सेस करने की सुविधा देने के लिए, हमारा आर्किटेक्चर Firebase के लिए Cloud Functions का फ़ायदा लेता है. Cloud Functions की मदद से, हम इस डेटा को ऐक्सेस और कैलकुलेट करने के लिए बैकएंड फ़ंक्शन तय कर सकते हैं. हम अपने वेब ऐप्लिकेशन में Firebase लाइब्रेरी भी शामिल करते हैं. इससे हम एचटीटीपी अनुरोध के ज़रिए अपने Cloud Function को ऐक्सेस कर सकते हैं.

अगला चरण यह पक्का करना है कि हम उपयोगकर्ता के लिए डेटा को अप-टू-डेट रखें. ऐसा करने के लिए, हम JavaScript setInterval फ़ंक्शन का इस्तेमाल करके 30 सेकंड के टाइम आउट के साथ एक टाइमर सेट करते हैं. टाइमर हर बार ट्रिगर होने पर, हम ऊपर बताए गए तरीके से, इंतज़ार के समय के अपडेट किए गए डेटा का अनुरोध करते हैं. नया डेटा मिलने के बाद, हमें मैप मार्कर के दिखने का तरीका रीफ़्रेश करना होगा. अगले चरण में, इन बदलावों को करने का तरीका बताया गया है.

तीसरा चरण - मैप मार्कर रेंडर करना

अब हम मैप पर बेहतर बनाए गए मार्कर को रेंडर करने के लिए, बेहतर मार्कर का इस्तेमाल कर सकते हैं. Google Maps Platform के Maps JavaScript API से बनाए गए मैप पर, बेहतर मार्कर रेंडर किए जा सकते हैं. बेहतर मार्कर का इस्तेमाल करते समय, JS मैप अनुरोध में मैप आईडी पैरामीटर ज़रूर शामिल करें.

नीचे दिए गए कोड स्निपेट में, हम मार्कर बनाते हैं और एचटीएमएल div एलिमेंट बनाकर मार्कर का कॉन्टेंट तय करते हैं:

// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");

// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
      map,
      position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
      content: storeWaitLabels[store_index]
    }));

आखिरी चरण में, हर स्टोर के लिए मार्कर टेक्स्ट और सीएसएस स्टाइल को अपडेट करना होता है. नीचे दिया गया कोड, इंतज़ार के समय का अपडेट किया गया डेटा पढ़ता है और इंतज़ार के समय के आधार पर, हर स्टोर पिन को स्टाइल असाइन करता है:

// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
     if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
     else storeWaitLabels[store_index].className = "wait-under-5";

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

रीयल-टाइम डेटा सोर्स से कनेक्ट करने के वैकल्पिक तरीके

रीयल-टाइम डेटा सोर्स से कनेक्ट करने के कई तरीके हैं. यहां हम Firebase Cloud Messaging और वेबसोकेट के दो विकल्पों की समीक्षा करते हैं. कोई भी तरीका चुनने से पहले, इन बातों का ध्यान रखें, ताकि आपका मैप टूल बेहतर परफ़ॉर्म करता रहे:

• अपडेट की फ़्रीक्वेंसी
• डेटा का वॉल्यूम
• मैप व्यू में मार्कर की संख्या
• हार्डवेयर और ब्राउज़र क्षमताएं

Firebase क्लाउड से मैसेज

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

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

WebSockets

WebSockets, डेटा को अप-टू-डेट रखने के लिए, पुश-आधारित एक और तरीका है. पिछली स्थिति की तरह ही, अपने बैकएंड और मैप ऐप्लिकेशन के बीच स्थायी कनेक्शन बनाने के लिए, WebSockets का इस्तेमाल किया जा सकता है. इस तरीके के फ़ंक्शनल फ़ायदे, Firebase Cloud Messaging से मिलते-जुलते हैं. हालांकि, ज़रूरी इन्फ़्रास्ट्रक्चर को कॉन्फ़िगर करने के लिए, ज़्यादा काम करना पड़ सकता है.

नतीजा

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

अगली कार्रवाइयां

और पढ़ना:

• ऐडवांस मार्कर - Google Developer Center
• कस्टम एचटीएमएल का इस्तेमाल करके मार्कर बनाना
• Firebase के लिए Cloud Functions
• Firebase Cloud Messaging

योगदानकर्ता

मुख्य लेखक:

जिम लेफ़लर | Google Maps Platform के सलूशन इंजीनियर

जॉन ब्रैनिगन | Google Cloud Platform के सीनियर कस्टमर इंजीनियर

स्टीव बैरेट | Google Maps Platform के सलूशन इंजीनियर