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

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

इस हीरो इमेज में, Google Maps JS मैप दिखाया गया है. यह मैप सैन फ़्रांसिस्को पर फ़ोकस करता है. कई जगहों पर रंगीन मार्कर दिख रहे हैं. इनमें '2 मिनट' या '4 मिनट' लिखा है". समय बीतने के साथ-साथ, रंग और कॉन्टेंट अपडेट होता रहता है.

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

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

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

डाइनैमिक ऐडवांस मार्कर सलूशन

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

आर्किटेक्चर के इस डायग्राम में, उपयोगकर्ता को वेब ऐप्लिकेशन ऐक्सेस करते हुए दिखाया गया है. वेब ऐप्लिकेशन के लिए Google का इन्फ़्रास्ट्रक्चर (GMP और Firebase Cloud Functions). Firebase Cloud Functions, ग्राहक के बैकएंड से लाइव डेटा ऐक्सेस करता है.

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

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

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

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

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

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

डेटा सोर्स से कनेक्ट करने के कई तरीके हैं. सही सलूशन, आपके इस्तेमाल के उदाहरण और तकनीकी इन्फ़्रास्ट्रक्चर पर निर्भर करता है. इस उदाहरण में, हम पुल अप्रोच का इस्तेमाल कर रहे हैं. इसमें हम एचटीटीपी अनुरोधों (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";

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

इस हीरो इमेज में, Google Maps JS मैप दिखाया गया है. यह मैप सैन फ़्रांसिस्को पर फ़ोकस करता है. कई जगहों पर रंगीन मार्कर दिखाए गए हैं. इनमें '2 मिनट' या '4 मिनट' लिखा है. समय बीतने के साथ-साथ, रंग और कॉन्टेंट अपडेट होता रहता है.

रीयल-टाइम डेटा सोर्स से कनेक्ट करने के अन्य तरीके

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

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

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

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

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

WebSockets

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

नतीजा

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

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

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

योगदानकर्ता

मुख्य लेखक:

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

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

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