HTML Geolocation API

Modern web applications में location-based features बहुत common हो गए हैं। Maps, delivery tracking, nearby services, weather apps और ride-booking जैसी services HTML Geolocation API पर depend करती हैं। यह API browser को user की geographical location access करने की permission देती है।

इस chapter में हम detail में सीखेंगे कि HTML Geolocation API क्या है, यह कैसे काम करती है, methods कौन-कौन से हैं, permissions कैसे handle होती हैं, errors क्या होते हैं और real-world use cases कैसे implement किए जाते हैं।

HTML Geolocation API क्या है?

HTML Geolocation API एक Web API है जो browser के through user की location जानकारी प्रदान करती है। यह API latitude, longitude, accuracy जैसी information return करती है।

Important point यह है कि Geolocation API:

• GPS, Wi‑Fi, mobile network या IP address का use कर सकती है
• User permission के बिना location access नहीं करती

Geolocation API कहाँ available होती है?

Geolocation API navigator.geolocation object के through access की जाती है।

if (navigator.geolocation) {
  console.log('Geolocation API supported');
}

अगर browser support नहीं करता, तो navigator.geolocation undefined होगा।

Geolocation API कैसे काम करती है?

Process simple होता है:

1. Browser user से location permission मांगता है
2. User allow या deny करता है
3. Browser location data collect करता है
4. JavaScript callback function में location data return होती है

Geolocation API के Main Methods

Geolocation API तीन मुख्य methods provide करती है।

1. getCurrentPosition()

Purpose

User की current location एक बार fetch करने के लिए use होता है।

Syntax

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

Example

navigator.geolocation.getCurrentPosition(function(position) {
  console.log(position.coords.latitude);
  console.log(position.coords.longitude);
});

Returned Data (Position Object)

• coords.latitude
• coords.longitude
• coords.accuracy
• coords.altitude
• coords.speed

Use Cases

• Show current location on map
• Auto-detect city or country

2. watchPosition()

Purpose

User की location continuously track करने के लिए use होता है।

Example

const watchId = navigator.geolocation.watchPosition(function(position) {
  console.log(position.coords.latitude);
});

Use Cases

• Live tracking
• Fitness apps
• Navigation apps

3. clearWatch()

Purpose

watchPosition() को stop करने के लिए use होता है।

Example

navigator.geolocation.clearWatch(watchId);

Error Handling in Geolocation API

अगर location access fail हो जाती है, तो error callback execute होता है।

Example

navigator.geolocation.getCurrentPosition(
  success,
  function(error) {
    console.log(error.code);
  }
);

Common Error Codes

• 1 Permission denied
• 2 Position unavailable
• 3 Timeout

Geolocation Options Object

Options object location accuracy और behavior control करता है।

Example

const options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

navigator.geolocation.getCurrentPosition(success, error, options);

Options Explanation

• enableHighAccuracy High accuracy location
• timeout Maximum wait time
• maximumAge Cached location age

HTTPS Requirement

Modern browsers में Geolocation API only secure origins (HTTPS) पर काम करती है।

Exception:

• localhost (development purpose)

Privacy और Security Considerations

• User consent mandatory है
• Location data sensitive information है
• Data को third-party के साथ share करते समय caution जरूरी है

Browser Compatibility

Geolocation API सभी modern browsers में supported है:

• Chrome
• Firefox
• Edge
• Safari

लेकिन older browsers में limited support हो सकता है।

Real-World Example: Show Location on Page

<button onclick="getLocation()">Get Location</button>
<p id="output"></p>

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(pos) {
      document.getElementById('output').textContent =
        pos.coords.latitude + ', ' + pos.coords.longitude;
    });
  }
}

Common Mistakes

• HTTPS requirement ignore करना
• Error handling implement न करना
• Unnecessary continuous tracking

Best Practices

• User को clear reason बताएं कि location क्यों चाहिए
• Only required duration तक location access रखें
• Error और permission states handle करें

HTML Geolocation API और JavaScript

Geolocation API purely JavaScript-based Web API है। HTML का role सिर्फ UI elements provide करने तक सीमित होता है।

Conclusion

HTML Geolocation API modern, location-aware web applications बनाने के लिए एक powerful tool है। अगर सही तरीके से permission handling, accuracy options और security practices follow की जाएँ, तो यह API user experience को काफी बेहतर बना सकती है।

HTML और JavaScript सीख रहे developers के लिए Geolocation API एक must-know topic है।