HTML Geolocation API

The HTML Geolocation API is a feature in web browsers that allows a web page to obtain the geographical location of a user's device. This can be useful for applications and websites that need to provide location-based services, such as mapping, local search, or customized content based on the user's location.

The Geolocation API is part of the Web Platform API and is typically accessed using JavaScript. Here's a basic example of how you might use the Geolocation API in HTML and JavaScript:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geolocation Example</title>
</head>
<body>

    <h1>Geolocation Example</h1>

    <p id="demo">Click the button to get your location:</p>

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

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

        function showPosition(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            document.getElementById("demo").innerHTML = "Latitude: " + latitude + "
Longitude: " + longitude;
        }

        function showError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    document.getElementById("demo").innerHTML = "User denied the request for Geolocation.";
                    break;
                case error.POSITION_UNAVAILABLE:
                    document.getElementById("demo").innerHTML = "Location information is unavailable.";
                    break;
                case error.TIMEOUT:
                    document.getElementById("demo").innerHTML = "The request to get user location timed out.";
                    break;
                case error.UNKNOWN_ERROR:
                    document.getElementById("demo").innerHTML = "An unknown error occurred.";
                    break;
            }
        }
    </script>

</body>
</html>

You can click on above box to edit the code and run again.

Output

The getLocation function is triggered when the user clicks the "Get Location" button.
It checks if the browser supports the Geolocation API.
If supported, it calls navigator.geolocation.getCurrentPosition to get the current position.
If successful, the showPosition function is called, displaying the latitude and longitude.
If there's an error, the showError function handles different error cases.

It's important to note that obtaining the user's location requires their consent, and modern browsers will prompt the user to allow or deny the request for geolocation information.

Browser Support

The numbers in the table specify the first browser version that fully supports Geolocation.

API	Geolocation
	5.0 - 49.0 (http) 50.0 (https)
	3.5
	9.0
	16.0
	5.0

The getCurrentPosition() Method - Return Data

The getCurrentPosition() method returns an object on success. The latitude, longitude and accuracy properties are always returned. The other properties are returned if available:

Property	Returns
coords.latitude	The latitude as a decimal number (always returned)
coords.longitude	The longitude as a decimal number (always returned)
coords.accuracy	The accuracy of position (always returned)
coords.altitude	The altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracy	The altitude accuracy of position (returned if available)
coords.heading	The heading as degrees clockwise from North (returned if available)
coords.speed	The speed in meters per second (returned if available)
timestamp	The date/time of the response (returned if available)