← Back to HTML Course | Chapter 7: Advanced APIs & Features | Lesson 3 of 11

HTML Geolocation

सोचिए आप अपने कंप्यूटर पर आस-पास के रेस्टोरेंट्स सर्च कर रहे हैं, लेकिन अपना zip code टाइप करने के बजाय, वेबसाइट खुद-ब-खुद पता लगा लेती है कि आप ठीक कहाँ खड़े हैं। यह आपके ब्राउज़र में एक डिजिटल टूर गाइड होने जैसा है। HTML Geolocation API बिल्कुल यही करता है। यह आपके ब्राउज़र और आपकी डिवाइस के GPS या नेटवर्क के बीच का गैप पाटता है, जिससे आपके वेब एप्लिकेशन आपके कोऑर्डिनेट्स पता लगा पाते हैं। यह कस्टम मैप्स बनाने, लोकल मौसम दिखाने, या डायनामिक रूप से आस-पास की सेवाएं ढूंढने के लिए बेहद उपयोगी है।
Syntax
markup
navigator.geolocation.getCurrentPosition(
  (position) => { /* position.coords */ },
  (error) => { /* handle error */ }
);

Geolocation को समझना

Geolocation API वेब एप्लिकेशन्स को यूज़र के भौगोलिक निर्देशांक (coordinates) माँगने देती है। ब्राउज़र आपकी पोज़िशन पता करने के लिए सेल टावर, Wi-Fi नेटवर्क्स और GPS सेंसर्स का उपयोग करता है।

Note: Geolocation एक सुरक्षित API है जिसे कोई भी लोकेशन डेटा शेयर करने से पहले यूज़र की स्पष्ट परमिशन चाहिए होती है।
Warning: यूज़र की प्राइवेसी सुरक्षित रखने के लिए यह API केवल सुरक्षित HTTPS कनेक्शन पर ही काम करता है।

उदाहरण: Understanding Geolocation

markup
<script>
  if (navigator.geolocation) {
    console.log('Geolocation is supported');
  }
</script>

मौजूदा पोज़िशन प्राप्त करना

यूज़र के सटीक निर्देशांक पता करने के लिए, आप getCurrentPosition मेथड का उपयोग करते हैं। यह मेथड यूज़र की लोकेशन माँगता है और सफल होने पर उनके latitude और longitude निर्देशांक लौटाता है।

Note: अपने विज़िटर्स को यह समझाने के लिए कि आपके टूल को उनकी लोकेशन की ज़रूरत क्यों है, एक स्पष्ट ऑन-स्क्रीन प्रॉम्प्ट का उपयोग करें।
Warning: कमज़ोर GPS सिग्नल वाले मोबाइल डिवाइसेस पर लोकेशन रिक्वेस्ट को कुछ सेकंड लग सकते हैं।

उदाहरण: Getting the Current Position

markup
<script>
  navigator.geolocation.getCurrentPosition(function (position) {
    console.log(position.coords.latitude, position.coords.longitude);
  });
</script>

परमिशन डिनायल को संभालना

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

Note: जो यूज़र लोकेशन शेयरिंग को ब्लॉक कर देते हैं, उनके लिए हमेशा स्पष्ट, मददगार फॉलबैक विकल्प (जैसे मैनुअल सर्च बॉक्स) लिखें।
Warning: अगर आप errors हैंडल नहीं करते, तो जब यूज़र लोकेशन रिक्वेस्ट ब्लॉक करेंगे तब आपका पेज फ्रीज़ हो जाएगा।

उदाहरण: Handling Permission Denials

markup
<script>
  navigator.geolocation.getCurrentPosition(
    function (position) { console.log(position.coords); },
    function (error) { console.log('Location access denied:', error.message); }
  );
</script>

रीयल-टाइम पोज़िशन ट्रैकिंग

अगर आप कोई इंटरैक्टिव मैप या नेविगेशन ऐप बना रहे हैं, तो आपको यूज़र के मूव करते समय उनकी लोकेशन ट्रैक करने की ज़रूरत होती है। आप उनके निर्देशांकों को रीयल-टाइम में मॉनिटर और अपडेट करने के लिए watchPosition मेथड का उपयोग कर सकते हैं।

Note: बैटरी बचाने के लिए, यूज़र के टूल का इस्तेमाल खत्म करते ही coordinates ट्रैक करना बंद करने के लिए हमेशा clearWatch का उपयोग करें।
Warning: रियल-टाइम ट्रैकिंग मोबाइल डिवाइस की बैटरी को जल्दी खत्म कर सकती है, इसलिए इसका उपयोग तभी करें जब बिल्कुल ज़रूरी हो।

उदाहरण: Real-Time Position Tracking

markup
<script>
  const watchId = navigator.geolocation.watchPosition(function (position) {
    console.log(position.coords.latitude, position.coords.longitude);
  });
  navigator.geolocation.clearWatch(watchId);
</script>

लोकेशन एक्युरेसी को मैनेज करना

डिफ़ॉल्ट रूप से, ब्राउज़र सटीकता से ज़्यादा स्पीड को प्राथमिकता देते हैं। आप अपनी पोज़िशन पता करने के लिए ब्राउज़र को हाई-प्रिसिज़न GPS सेंसर्स इस्तेमाल करने पर मजबूर करने के लिए कॉन्फ़िगरेशन विकल्प (जैसे enableHighAccuracy) पास कर सकते हैं।

Note: सटीक मैप बनाते समय enableHighAccuracy को true सेट करें, लेकिन साधारण कंट्री लोकेशन लुकअप के लिए इसे false ही रहने दें।
Warning: High accuracy चालू करने से लोकेशन रिक्वेस्ट को प्रोसेस होने में ज़्यादा समय लग सकता है।

उदाहरण: Managing Location Accuracy

markup
<script>
  navigator.geolocation.getCurrentPosition(
    function (position) { console.log(position.coords); },
    function (error) { console.log(error); },
    { enableHighAccuracy: true }
  );
</script>

watchPosition बनाम getCurrentPosition

getCurrentPosition यूज़र की लोकेशन सिर्फ एक बार माँगता है और रुक जाता है। watchPosition लगातार मॉनिटर करता रहता है और जब भी यूज़र की लोकेशन बदलती है, आपके कॉलबैक फंक्शन को बार-बार कॉल करता है, जो कि लाइव ट्रैकिंग फीचर्स जैसे चलती हुई डिलीवरी दिखाने वाले मैप के लिए ज़रूरी होता है।

Note: जब आपको लाइव अपडेट्स की ज़रूरत न रहे, जैसे यूज़र किसी ट्रैकिंग पेज से बाहर चला जाए, तब बैटरी बचाने के लिए हमेशा clearWatch कॉल करें।
Warning: watchPosition को अनिश्चित समय तक चलते रहने देने से मोबाइल यूज़र की बैटरी काफी तेज़ी से खत्म होती है, क्योंकि यह GPS रेडियो को एक्टिव रखता है।

उदाहरण: watchPosition vs getCurrentPosition

markup
<script>
  navigator.geolocation.getCurrentPosition(pos => console.log('Once:', pos.coords));
  const id = navigator.geolocation.watchPosition(pos => console.log('Updated:', pos.coords));
</script>

प्राइवेसी संबंधी बातें

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

साइट्स को लोकेशन तभी माँगनी चाहिए जब उसका कोई स्पष्ट, समझ में आने वाला कारण हो, जैसे नज़दीकी दुकानें दिखाना।

Note: ब्राउज़र का परमिशन प्रॉम्प्ट ट्रिगर करने से पहले, अपने खुद के इंटरफ़ेस टेक्स्ट में समझाएँ कि आपको यूज़र की लोकेशन क्यों चाहिए, ताकि यूज़र्स को अचानक झटका न लगे।
Warning: पेज लोड होते ही, बिना किसी संदर्भ के लोकेशन एक्सेस माँगना एक बड़ी वजह है जिसकी वजह से यूज़र्स geolocation permission रिक्वेस्ट पर भरोसा नहीं करते और उसे deny कर देते हैं।

उदाहरण: Privacy Considerations

markup
<button onclick="navigator.geolocation.getCurrentPosition(pos => console.log(pos))">
  Show nearby stores
</button>
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.