HTML Geolocation - Complete HTML Tutorial

📍 What is Geolocation?

The Geolocation API allows you to get the user's current location (with their permission). This is useful for maps, weather apps, and location-based services.


<!-- Simple geolocation example -->
<button onclick="getLocation()">Get My Location</button>
<p id="demo"></p>

<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        document.getElementById("demo").innerHTML = "Geolocation not supported.";
    }
}

function showPosition(position) {
    document.getElementById("demo").innerHTML = 
    "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

Geolocation Features

🎯

Current Position

Get user's current location

navigator.geolocation.getCurrentPosition()

👀

Watch Position

Track location changes

navigator.geolocation.watchPosition()

🛡️

Permission Based

Requires user permission

if (navigator.geolocation) { ... }

📊

Position Data

Latitude, longitude, accuracy

position.coords.latitude

🔹 Basic Geolocation Example

Here's a simple example to get the user's location:

<!DOCTYPE html>
<html>
<body>
    <h2>Geolocation Example</h2>
    <button onclick="getLocation()">Get Location</button>
    <p id="location"></p>

    <script>
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success, error);
        } else {
            document.getElementById("location").innerHTML = 
            "Geolocation is not supported by this browser.";
        }
    }

    function success(position) {
        const lat = position.coords.latitude;
        const lon = position.coords.longitude;
        document.getElementById("location").innerHTML = 
        `Latitude: ${lat}<br>Longitude: ${lon}`;
    }

    function error() {
        document.getElementById("location").innerHTML = 
        "Unable to retrieve your location.";
    }
    </script>
</body>
</html>

🔹 Position Properties

The position object contains useful information:

function showPosition(position) {
    const coords = position.coords;
    
    console.log("Latitude: " + coords.latitude);
    console.log("Longitude: " + coords.longitude);
    console.log("Accuracy: " + coords.accuracy + " meters");
    console.log("Altitude: " + coords.altitude);
    console.log("Speed: " + coords.speed);
    console.log("Timestamp: " + position.timestamp);
}

HTML Geolocation API