HTML Geolocation API

HTML Geolocation API

The HTML Geolocation API allows a web page to access the geographical location of a user’s device (with their permission). You can use it to get the latitude, longitude, altitude, and more for location-based services.

This API is available in modern browsers and is usually used with JavaScript, not just HTML.

Key Features

Get current position of the user.
Track real-time location changes.
Works with GPS, Wi-Fi, or IP address depending on the device.
Requires user permission for privacy.

Methods

navigator.geolocation.getCurrentPosition(success, error)
- Retrieves the user’s current position once.
navigator.geolocation.watchPosition(success, error)
- Continuously tracks location changes.
navigator.geolocation.clearWatch(id)
- Stops tracking location started by watchPosition.

Example: Get User Location

<!DOCTYPE html>
<html>
<head>
<title>Geolocation API Example</title>
</head>
<body>

<h2>Find My Location</h2>
<button onclick="getLocation()">Get Location</button>
<p id="location"></p>

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

function showPosition(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById("location").innerText =
"Latitude: " + lat + "\nLongitude: " + lon;
}

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

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Geolocation API Example</title>

</head>

<body>

<h2>Find My Location</h2>

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

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition, showError);

} else {

document.getElementById("location").innerText = "Geolocation is not supported by this browser.";

}

function showPosition(position) {

var lat = position.coords.latitude;

var lon = position.coords.longitude;

document.getElementById("location").innerText =

"Latitude: " + lat + "\nLongitude: " + lon;

}

function showError(error) {

switch(error.code) {

case error.PERMISSION_DENIED:

alert("User denied the request for Geolocation.");

break;

case error.POSITION_UNAVAILABLE:

alert("Location information is unavailable.");

break;

case error.TIMEOUT:

alert("The request to get user location timed out.");

break;

case error.UNKNOWN_ERROR:

alert("An unknown error occurred.");

break;

}

</script>

</body>

</html>

Explanation

navigator.geolocation.getCurrentPosition() → Requests the current location.
position.coords.latitude and position.coords.longitude → Get latitude and longitude.
showError() → Handles cases when the user denies access or location is unavailable.

Key Points of HTML Geolocation API

User permission is required for privacy.
Location may not be 100% accurate on all devices.
Can be combined with Google Maps API to show location visually.
Works on desktop and mobile devices.

The Geolocation API is useful for:

Location-based services (maps, weather apps)
Finding nearby stores or services
Tracking user location in real-time apps

HTML Geolocation API