HTML geolocation means reading the device’s location from a webpage so you can show nearby results, place a marker on a map, or personalize content. The browser asks the user for permission first. Access goes through navigator.geolocation (the Geolocation API).
Typically a <button> starts the request. A script calls getCurrentPosition or watchPosition, then writes latitude/longitude into a <p> or other element. Never grab location silently on page load without a clear user action.
<geolocation> element?MDN also documents an experimental <geolocation> element: a browser-defined control with built-in UI and a clearer permission flow. It still uses the Geolocation API underneath. Support is limited today—nest a fallback <button> that calls the API for other browsers.
Store finders, weather for “near me,” delivery ETA, or check-in features. Always explain why you need location and provide a manual address field if the user declines.
Modern browsers expose geolocation on HTTPS pages (and usually localhost for development).
Location can identify a person. Ask only when needed, use the data for the stated purpose, and do not store it longer than necessary.
Third-party frames may need Permissions-Policy: geolocation=… and allow="geolocation" on the <iframe>.
Classic pattern: button in HTML, Geolocation API in a script:
navigator.geolocation.getCurrentPosition(success, error, options);
navigator.geolocation.watchPosition(success, error, options);
navigator.geolocation.clearWatch(watchId);<button type="button" id="get-location">Get Location</button>
<p id="location"></p>
<script>
document.getElementById("get-location").onclick = function () {
navigator.geolocation.getCurrentPosition(
function (position) {
document.getElementById("location").textContent =
"Latitude: " + position.coords.latitude +
", Longitude: " + position.coords.longitude;
},
function (error) {
document.getElementById("location").textContent = "Error: " + error.message;
}
);
};
</script>Experimental element (with API fallback inside):
<geolocation>
<button type="button" id="fallback">Use location</button>
</geolocation>
<p id="output"></p>Pieces that connect location data to your webpage:
| Concept | Role |
|---|---|
navigator.geolocation | Entry point to the Geolocation API from a page script |
getCurrentPosition | One-shot location fix |
watchPosition / clearWatch | Live updates while the device moves; stop when done |
GeolocationPosition | Success result: coords + timestamp |
coords.latitude / longitude | Common values to show in HTML |
GeolocationPositionError | Error callback: code and message |
| Permission prompt | User must allow before the browser returns a fix |
<geolocation> | Experimental declarative control (limited browser support) |
watch / autolocate | Attributes on <geolocation> (when supported) |
| Option | Meaning |
|---|---|
enableHighAccuracy | Prefer GPS / higher precision when available (may use more power) |
timeout | Milliseconds before the error callback runs with TIMEOUT |
maximumAge | Accept a cached position no older than this many ms |
| Code | Name | Typical HTML message |
|---|---|---|
1 | PERMISSION_DENIED | Please allow location, or enter an address |
2 | POSITION_UNAVAILABLE | Location could not be determined |
3 | TIMEOUT | Timed out — try again |
Build around a clear control and visible feedback.
<geolocation> with a nested fallback button).navigator.geolocation exists.getCurrentPosition(success, error, options).coords into the HTML; in error, show a friendly message.watchPosition and call clearWatch when leaving the page or stopping.| Goal | Pattern |
|---|---|
| One fix after click | getCurrentPosition(ok, err) |
| Live tracking | watchId = watchPosition(ok, err) then clearWatch(watchId) |
| Prefer GPS | { enableHighAccuracy: true } |
| Fail fast | { timeout: 10000 } |
| Show in HTML | p.textContent = lat + ", " + lng |
Click the button to request this device’s location (browser permission required). Works best on HTTPS or localhost.
Five patterns: current position, options, watch, errors, and a full HTML page with a button.
navigator.geolocation.getCurrentPosition(function (pos) {
console.log(pos.coords.latitude, pos.coords.longitude);
});GeolocationPosition.navigator.geolocation.getCurrentPosition(ok, err, {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 60000
});var watchId = navigator.geolocation.watchPosition(function (pos) {
console.log("Updated:", pos.coords.latitude);
});
// Later:
navigator.geolocation.clearWatch(watchId);<geolocation watch> maps to similar behavior when supported.navigator.geolocation.getCurrentPosition(
function (pos) { /* success — update HTML */ },
function (err) {
if (err.code === 1) alert("Please allow location access.");
else if (err.code === 3) alert("Timed out — try again.");
}
);<p> or alert.timeout or lower accuracy.Button click → permission → coordinates in the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geolocation Example</title>
</head>
<body>
<h1>Geolocation Example</h1>
<button type="button" id="get-location">Get Location</button>
<p id="location"></p>
<script>
document.getElementById("get-location").onclick = function () {
if (!navigator.geolocation) {
document.getElementById("location").textContent =
"Geolocation is not supported.";
return;
}
navigator.geolocation.getCurrentPosition(
function (position) {
document.getElementById("location").textContent =
"Latitude: " + position.coords.latitude +
", Longitude: " + position.coords.longitude;
},
function (error) {
document.getElementById("location").textContent =
"Error: " + error.message;
}
);
};
</script>
</body>
</html><geolocation> with a nested fallback button on unsupported browsers.Most failures are permission, insecure context, or missing error UI—not missing HTML tags.
Geolocation is blocked outside secure contexts. Deploy HTTPS for production HTML.
Handle code 1 and offer a city/ZIP form. Do not spam the prompt.
watchPosition runningCall clearWatch when the user stops tracking or navigates away.
May need Permissions-Policy and allow="geolocation" on the iframe.
<geolocation>Limited availability. Always nest a button + API fallback for today’s browsers.
Some regions may need local providers instead of the vanilla browser service.
navigator.geolocation is widely available in modern browsers (secure contexts). The HTML geolocation element is experimental with limited availability.
Use the Geolocation API from page scripts everywhere users browse securely; treat
Bottom line: Ship getCurrentPosition behind a button today; add
One line: User activates a control → browser asks permission → script reads coords → HTML shows the result.
Open the full HTML demo and allow location when the browser asks.
8 people found this page helpful