HTML Geolocation

HTML Geolocation: Reading Location Data with User Consent

The HTML Geolocation API lets web applications request a visitor's geographic coordinates—latitude and longitude—using JavaScript. Browsers never share location data automatically; they display a permission prompt first, and the API only runs over secure https:// connections (plus http://localhost during local testing).

Requesting Current Coordinates

Check that 'geolocation' in navigator exists, then call navigator.geolocation.getCurrentPosition(successCallback, errorCallback). The success callback receives a position object containing coords.latitude, coords.longitude, and estimated accuracy in meters.

Always provide an error callback to handle permission denial, unavailable GPS signals, or request timeouts gracefully.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Geolocation Demo</title>
</head>
<body style="font-family: system-ui, sans-serif; padding: 20px;">
    <button id="loc-btn" type="button">Check My Coordinates</button>
    <p id="loc-output">Click the button to request location permission.</p>

    <script>
        const out = document.getElementById('loc-output');
        document.getElementById('loc-btn').addEventListener('click', () => {
            if (!('geolocation' in navigator)) {
                out.textContent = 'Geolocation is not supported by this browser.';
                return;
            }
            navigator.geolocation.getCurrentPosition(
                (pos) => {
                    const { latitude, longitude } = pos.coords;
                    out.textContent = `Lat: ${latitude.toFixed(4)}, Lng: ${longitude.toFixed(4)}`;
                },
                (err) => {
                    out.textContent = `Location unavailable: ${err.message}`;
                },
                { enableHighAccuracy: false, timeout: 8000 }
            );
        });
    </script>
</body>
</html>

Continuous Tracking with watchPosition

For turn-by-turn navigation, delivery maps, or fitness trackers, call navigator.geolocation.watchPosition() to receive updates whenever the user moves, and stop tracking later with navigator.geolocation.clearWatch(watchId) to preserve mobile battery life and respect user privacy.

Common Mistakes to Avoid

• Prompting for location immediately on page load: Unexpected location popups trigger high rejection rates. Wait until the user clicks a "Use Near Me" button.
• Testing over plain http:// on a staging server: Chrome and Safari disable Geolocation completely on insecure HTTP origins.
• Forgetting to handle denied permission: Users can click "Block", so always offer a manual city or ZIP search fallback.

Frequently Asked Questions

Does HTML Geolocation work without GPS hardware?

Yes. Desktop browsers estimate location using Wi-Fi access points and IP routing when no GPS chip is present.

How accurate is browser geolocation?

Mobile GPS typically narrows coordinates within 5 to 20 meters, while desktop Wi-Fi or IP lookups may vary from a few hundred meters to a city neighborhood.