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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

चरण 3 - मैप मार्कर रेंडर करें

अब हम बेहतर मार्कर का इस्तेमाल करके, मैप पर बेहतर बनाए गए मार्कर को रेंडर कर सकते हैं. 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 क्लाउड से मैसेज और Websockets. आप चाहे जो भी तरीका चुनें, नीचे दी गई बातों को ध्यान में रखें. इससे, आपका मैप टूल बेहतर परफ़ॉर्म करेगा:

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

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

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

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

WebSockets

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

नतीजा

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

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

इसके बारे में और पढ़ें:

• बेहतर मार्कर - Google Developer Center
• कस्टम एचटीएमएल से मार्कर बनाना
• Firebase के लिए Cloud Functions
• Firebase क्लाउड से मैसेज करने की सुविधा

योगदानकर्ता

मुख्य लेखक:

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

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

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