HTML Geolocation API
The Geolocation API is used to get the user's current location.
Locate the User's Position
The Geolocation API gets the user's current location. Because this can affect privacy, the location is not available unless the user approves it.
Note: The Geolocation API only works on secure contexts such as HTTPS. Tip: It is most accurate on devices with GPS, like smartphones or smartwatches.
Browser Support
Geolocation is supported in all modern browsers (from Chrome 5, Edge 12, Firefox 3.5, Safari 5, and Opera 10.6).
Using HTML Geolocation API
The Geolocation API is reached through navigator.geolocation, which makes the browser ask the user for permission to access their location. If the user accepts, the browser uses the best feature on the device (such as GPS). The getCurrentPosition() method returns the user's current location.
The example checks whether geolocation is supported and, if so, runs getCurrentPosition(); otherwise it shows a message. The success function outputs the latitude and longitude, and the error function alerts a message if it fails.
Example
Showing the user's latitude and longitude.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geolocation Basic</title>
</head>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function success(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function error() {
alert("Sorry, no position available.");
}
</script>
</body>
</html>
Error Handling and Rejections
The second parameter of getCurrentPosition() handles errors; it names a function to run if getting the location fails. You can inspect error.code for a specific message, handling cases like PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT, and UNKNOWN_ERROR.
Example
Geolocation with detailed error messages.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error Handling</title>
</head>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function success(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function error(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
Location-specific Information
Geolocation is useful for location-specific information, such as up-to-date local information, showing points of interest near the user, and turn-by-turn GPS navigation.
The getCurrentPosition() Method - Return Data
On success, getCurrentPosition() returns an object. It always returns coords.latitude, coords.longitude, and coords.accuracy. The others are returned only if available: coords.altitude (meters above sea level), coords.altitudeAccuracy, coords.heading (degrees clockwise from north), coords.speed (meters per second), and timestamp (the date and time of the response).
Geolocation Object - Other interesting Methods
The Geolocation object also has other methods: watchPosition() returns the current location and keeps returning updates as the user moves (like the GPS in a car), and clearWatch() stops watchPosition(). You need an accurate GPS device, like a smartphone, to test watchPosition().
Example
Continuously tracking the user's location with watchPosition().
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watch Position</title>
</head>
<body>
<p>Click the button to start watching your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(success, error);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function success(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function error(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>