पेश है <geolocation> एचटीएमएल एलिमेंट

Mari Viana

Minh Le

Thomas Steiner

पब्लिश होने की तारीख: 13 जनवरी, 2026

Chrome 144 से, नए <geolocation> एचटीएमएल एलिमेंट का इस्तेमाल किया जा सकता है. यह एलिमेंट, इस बात में बड़ा बदलाव दिखाता है कि साइटें उपयोगकर्ता की जगह की जानकारी के डेटा का अनुरोध कैसे करती हैं. यह स्क्रिप्ट से ट्रिगर होने वाले अनुमति के अनुरोधों से हटकर, उपयोगकर्ता की कार्रवाई पर आधारित अनुभव की ओर बढ़ता है. इससे अनुमति की स्थितियों और गड़बड़ियों को मैनेज करने के लिए, ज़रूरी बॉयलरप्लेट कोड कम हो जाता है. साथ ही, इससे उपयोगकर्ता के इरादे का बेहतर सिग्नल मिलता है. इससे ब्राउज़र के इंटरवेंशन (जैसे, साइलेंट ब्लॉक) से बचने में मदद मिलती है.

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

सामान्य <permission> से लेकर खास <geolocation> तक

<geolocation> एलिमेंट, पेज में एम्बेड किए गए अनुमति कंट्रोल करने की सुविधा का नया वर्शन है. शुरुआत में, इसे type एट्रिब्यूट के साथ एक सामान्य <permission> एलिमेंट के तौर पर प्रस्तावित किया गया था. इसके बारे में ज़्यादा जानने के लिए, मूल जानकारी देने वाला लेख पढ़ें. टाइप एट्रिब्यूट की वैल्यू (उदाहरण के लिए, "geolocation") से यह तय होगा कि अनुमति किस तरह की मांगी गई है. उदाहरण के लिए, शुरुआती प्रस्ताव में कैमरा, माइक्रोफ़ोन, और जियोलोकेशन जैसी वैल्यू शामिल हैं.

कॉन्सेप्ट की पुष्टि करना

हमने Chrome 126 से 143 तक, सामान्य <permission> एलिमेंट के लिए ऑरिजिन ट्रायल चलाया. इस एक्सपेरिमेंट का मकसद यह परिकल्पना की जांच करना था कि कॉन्टेक्स्ट के हिसाब से बटन उपलब्ध कराने से, लोगों का भरोसा बढ़ेगा और वे बेहतर फ़ैसले ले पाएंगे.

इस ऑरिजिन ट्रायल के नतीजों से, इस मुख्य सिद्धांत की पुष्टि हुई है:

• Zoom ने बताया कि इस एलिमेंट का इस्तेमाल करके, कैमरा या माइक्रोफ़ोन कैप्चर करने से जुड़ी गड़बड़ियों में 46.9% की कमी आई है. जैसे, सिस्टम-लेवल के ब्लॉकर. इस एलिमेंट का इस्तेमाल, उपयोगकर्ताओं को गड़बड़ी ठीक करने के बारे में बताने के लिए किया गया था.
• Immobiliare.it को जियोलोकेशन फ़्लो में 20% की बढ़ोतरी देखने को मिली.
• ZapImóveis ने पाया कि "पहले ब्लॉक किए गए" उपयोगकर्ताओं को यह एलिमेंट दिखाने पर, 54.4% उपयोगकर्ताओं ने ऐप्लिकेशन का इस्तेमाल फिर से शुरू कर दिया.

डिज़ाइन को फिर से तय करना

यह कॉन्सेप्ट कामयाब रहा, लेकिन इसे लागू करने के लिए बेहतर तरीके की ज़रूरत थी. ब्राउज़र बनाने वाली कंपनियों—जैसे कि Apple (Safari/WebKit) और Mozilla (Firefox)—से मिले सुझावों के मुताबिक, "सभी के लिए एक जैसा" एलिमेंट की वजह से, यूनीक क्षमता के व्यवहार से जुड़ी समस्याएं आ रही हैं.

इसलिए, हमने अनुमति कंट्रोल करने के सामान्य तरीके से, टारगेट किए गए और क्षमता के हिसाब से खास एलिमेंट (WICG की चर्चा देखें) पर स्विच किया. <geolocation> एलिमेंट, इन खास कंट्रोल में से पहला कंट्रोल है जिसे लॉन्च किया गया है. इसके बाद, हम एक खास <usermedia> एलिमेंट (कैमरा और माइक्रोफ़ोन ऐक्सेस करने के लिए) भी डेवलप कर रहे हैं. इसका अपना अलग ओरिजिन ट्रायल है.

मूल प्रस्ताव में, अनुमति की स्थिति को मैनेज करने पर फ़ोकस किया गया था. इसका मतलब है कि अनुमति देना या अस्वीकार करना. हालांकि, ये नए एलिमेंट डेटा मीडिएटर के तौर पर काम करते हैं. इससे ज़्यादातर इस्तेमाल के मामलों में, JavaScript API को सीधे तौर पर कॉल करने की ज़रूरत नहीं पड़ती.

<geolocation> एलिमेंट का इस्तेमाल क्यों करें?

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

<geolocation> एलिमेंट, कॉन्टेक्स्ट गैप की समस्या को हल करता है. इसके लिए, यह पक्का करता है कि अनुरोध सिर्फ़ उपयोगकर्ता ने शुरू किए हों. इस मॉडल के तीन मुख्य फ़ायदे हैं:

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

लागू करना

इस एलिमेंट को इंटिग्रेट करने के लिए, JavaScript API की तुलना में बहुत कम बॉयलरप्लेट की ज़रूरत होती है. कॉलबैक और गड़बड़ी की स्थितियों को मैन्युअल तरीके से मैनेज करने के बजाय, डेवलपर पेज पर टैग जोड़ सकते हैं और onlocation इवेंट के लिए सुन सकते हैं.

<geolocation
  onlocation="handleLocation(event)"
  autolocate
  accuracymode="precise">
</geolocation>

function handleLocation(event) {
  // Directly access the GeolocationPosition object on the element
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    console.log("Location retrieved:", latitude, longitude);
  } else if (event.target.error) {
    console.error("Error:", event.target.error.message);
  }
}

मुख्य एट्रिब्यूट और प्रॉपर्टी

• autolocate: एलिमेंट लोड होने पर, जगह की जानकारी अपने-आप पाने की कोशिश करता है. हालांकि, ऐसा सिर्फ़ तब होता है, जब अनुमति का मौजूदा स्टेटस इसकी अनुमति देता हो. इससे अचानक दिखने वाले प्रॉम्प्ट को रोका जा सकता है.
• accuracymode: यह "precise" या "approximate" की वैल्यू स्वीकार करता है. यह स्टैंडर्ड enableHighAccuracy विकल्प से मेल खाती है.
• watch: यह watchPosition() से मैच करने के लिए, व्यवहार को स्विच करता है. साथ ही, उपयोगकर्ता के चलने पर लगातार इवेंट फ़ायर करता है.
• position: यह डीओएम एलिमेंट पर मौजूद सिर्फ़ पढ़ने के लिए उपलब्ध प्रॉपर्टी है. यह GeolocationPosition ऑब्जेक्ट उपलब्ध होने पर उसे दिखाती है.
• error: यह सिर्फ़ पढ़ने के लिए उपलब्ध प्रॉपर्टी है. अनुरोध पूरा न होने पर, यह GeolocationPositionError दिखाती है.

स्टाइलिंग से जुड़ी शर्तें

उपयोगकर्ताओं का भरोसा बनाए रखने और धोखाधड़ी वाले डिज़ाइन पैटर्न को रोकने के लिए, <geolocation> एलिमेंट पर स्टाइल से जुड़ी कुछ पाबंदियां लागू होती हैं. ये पाबंदियां, <permission> एलिमेंट के एक्सपेरिमेंट के दौरान लागू होने वाली पाबंदियों जैसी ही होती हैं. बटन को उनकी साइट की थीम से मेल खाने के लिए पसंद के मुताबिक बनाया जा सकता है. हालांकि, ब्राउज़र कई सुरक्षा उपायों को लागू करता है:

• पढ़ने में आसानी: टेक्स्ट और बैकग्राउंड के रंगों की जांच की जाती है, ताकि यह पक्का किया जा सके कि उनमें सही कंट्रास्ट (आम तौर पर, कम से कम 3:1 का अनुपात) हो. इससे यह पक्का किया जा सकता है कि अनुमति का अनुरोध हमेशा पढ़ा जा सके. इसके अलावा, एलिमेंट को पारदर्शी होने से रोकने के लिए, ऐल्फ़ा चैनल (ओपोसिटी) को 1 पर सेट करना ज़रूरी है.
• साइज़ और स्पेसिंग: यह एलिमेंट, चौड़ाई, ऊंचाई, और फ़ॉन्ट के साइज़ के लिए कम से कम और ज़्यादा से ज़्यादा सीमाएं लागू करता है. नेगेटिव मार्जिन या आउटलाइन ऑफ़सेट बंद कर दिए जाते हैं, ताकि एलिमेंट को छिपाने या अन्य कॉन्टेंट के साथ धोखाधड़ी से ओवरलैप होने से रोका जा सके.
• विज़ुअल इंटिग्रिटी: इमेज को खराब करने वाले इफ़ेक्ट सीमित होते हैं. उदाहरण के लिए, ट्रांसफ़ॉर्म सिर्फ़ 2D ट्रांसलेशन और प्रोपोर्शनल स्केलिंग के साथ काम करता है.
• सीएसएस सूडो-क्लास: एलिमेंट, स्थिति के आधार पर स्टाइलिंग की सुविधा के साथ काम करता है. जैसे, :granted (जब अनुमति चालू हो).

प्रोग्रेसिव एन्हैंसमेंट की रणनीति

हम समझते हैं कि नए एचटीएमएल एलिमेंट को स्टैंडर्ड बनाने की प्रक्रिया धीरे-धीरे होती है. हालांकि, डेवलपर आज ही <geolocation> एलिमेंट को अपना सकते हैं. इससे अन्य ब्राउज़र इस्तेमाल करने वाले लोगों के लिए, ऐप्लिकेशन की सुविधाएँ काम करती रहेंगी.

इस एलिमेंट को इस तरह से डिज़ाइन किया गया है कि यह ग्रेसफ़ुली डिग्रेड हो जाए. ऐसे ब्राउज़र जिनमें <geolocation> एलिमेंट काम नहीं करता वे इसे [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement) के तौर पर इस्तेमाल करेंगे. अहम बात यह है कि अगर ब्राउज़र इस एलिमेंट के साथ काम करता है, तो यह बच्चों को रेंडर नहीं करेगा. इससे, एचटीएमएल को साफ़ तौर पर लिखा जा सकता है. ऐसा उन ब्राउज़र के लिए किया जा सकता है जिनमें यह सुविधा काम करती है और जिनमें यह सुविधा काम नहीं करती है.

कस्टम फ़ॉलबैक पैटर्न

अगर आपको फ़ॉलबैक अनुभव को पूरी तरह से कंट्रोल करना है, तो बटन जैसे चाइल्ड एलिमेंट का इस्तेमाल किया जा सकता है. इसे सामान्य JavaScript Geolocation API से जोड़ा जाता है.

<geolocation onlocation="updateMap()">
  <!-- Fallback contents if the element is not supported -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    Use my location
  </button>
</geolocation>

पॉलीफ़िल

इसके अलावा, npm से एक पॉलीफ़िल इंस्टॉल करें. यह <geolocation> के सभी इंस्टेंस को पारदर्शी तरीके से और अपने-आप कस्टम एलिमेंट <geo-location> (डैश पर ध्यान दें) से बदल देता है. यह रेगुलर JavaScript Geolocation API पर आधारित होता है. अगर ब्राउज़र में <geolocation> एलिमेंट काम करता है, तो पॉलीफ़िल कुछ नहीं करता. इस डेमो को देखें. इसमें पॉलीफ़िल को काम करते हुए दिखाया गया है. सोर्स कोड GitHub पर उपलब्ध है.

if (!('HTMLGeolocationElement' in window)) {
  await import('https://unpkg.com/geolocation-element-polyfill/index.js');
}

<geolocation onlocation="updateMap()"></geolocation>

सुविधा का पता लगाना

ज़्यादा मुश्किल लॉजिक के लिए, प्रोग्राम के हिसाब से सहायता का पता लगाया जा सकता है. इसके लिए, इस इंटरफ़ेस का इस्तेमाल करें:

if ('HTMLGeolocationElement' in window) {
  // Use modern <geolocation> element logic
} else {
  // Fallback to legacy navigator.geolocation API
}

आखिर में खास जानकारी

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

अनुमति से जुड़े अन्य इस्तेमाल के उदाहरणों के लिए, Chrome 144 से <usermedia> एचटीएमएल एलिमेंट के ऑरिजिन ट्रायल में शामिल हों. इससे, कैमरा और माइक्रोफ़ोन के लिए भी ये फ़ायदे मिलेंगे.

इसी विषय से जुड़े कुछ लिंक

• Chrome Platform Status पर मौजूद <geolocation> एलिमेंट
• जियोलोकेशन एचटीएमएल एलिमेंट के बारे में जानकारी
• डेमो पेज
• Mozilla Standards Position
• WebKit Standards Position

Acknowledgements

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