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

Mari Viana

Minh Le

Thomas Steiner

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

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

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

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

<geolocation> एलिमेंट, पेज में एम्बेड की गई अनुमति के कंट्रोल की पहल का नया वर्शन है. इसे शुरुआत में, <permission> एलिमेंट को type एट्रिब्यूट के तौर पर पेश किया गया था. ज़्यादा जानकारी के लिए, ओरिजनल एक्सप्लेनर देखें. टाइप एट्रिब्यूट की वैल्यू (उदाहरण के लिए, "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> एलिमेंट का इस्तेमाल क्यों करें?

फ़िलहाल, जियोलोकेशन फ़्लो, जियोलोकेशन 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 के तौर पर ट्रीट करेंगे. अहम बात यह है कि अगर ब्राउज़र, एलिमेंट को सपोर्ट करता है, तो वह चाइल्ड एलिमेंट को रेंडर नहीं करेगा. इससे, सपोर्ट करने वाले और न करने वाले, दोनों तरह के ब्राउज़र के लिए, एचटीएमएल को साफ़ तौर पर लिखा जा सकता है.

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

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

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

यह देखने के लिए कि यह सुविधा कैसे काम करती है, बुनियादी उदाहरण आज़माएं.

polyfill

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

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

• Chrome Platform Status पर <geolocation> एलिमेंट
• जियोलोकेशन एचटीएमएल एलिमेंट का एक्सप्लेनर
• डेमो पेज
• Mozilla के स्टैंडर्ड की स्थिति
• WebKit के स्टैंडर्ड की स्थिति

Acknowledgements

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