Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Geolocation position property
The HTML DOM Geolocation position property provides access to a user's device location and position data on Earth. The user must explicitly approve location sharing before this property can function, ensuring privacy protection. This property is commonly used for location-based services and tracking applications.
Syntax
Following is the syntax for accessing the position property −
position.coords position.timestamp
The position object is typically obtained through the navigator.geolocation.getCurrentPosition() method callback function.
Properties
The position object contains the following read-only properties −
| Property | Description |
|---|---|
| position.coords | Returns a coordinates object containing information like latitude, longitude, altitude, speed, and heading of the device. It also includes an accuracy value in meters describing measurement precision. |
| position.timestamp | Returns a DOMTimeStamp representing the time and date when the position object was created. |
Coordinates Object Properties
The position.coords object contains several useful properties −
| Property | Description |
|---|---|
| coords.latitude | The latitude in decimal degrees (read-only) |
| coords.longitude | The longitude in decimal degrees (read-only) |
| coords.accuracy | The accuracy of the position in meters (read-only) |
| coords.altitude | The altitude in meters above sea level (read-only, may be null) |
| coords.altitudeAccuracy | The accuracy of the altitude in meters (read-only, may be null) |
| coords.heading | The direction of travel in degrees (read-only, may be null) |
| coords.speed | The speed in meters per second (read-only, may be null) |
Basic Geolocation Example
Following example demonstrates how to get the user's current position using the position property −
<!DOCTYPE html>
<html>
<head>
<title>Geolocation Position Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Geolocation Position Property</h1>
<p>Click the button to get your coordinates:</p>
<button onclick="getCoords()" style="padding: 10px 20px; font-size: 16px;">Get Coordinates</button>
<p id="result" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0;">Your coordinates will appear here...</p>
<script>
var resultElement = document.getElementById("result");
function getCoords() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showCoords, showError);
} else {
resultElement.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showCoords(position) {
resultElement.innerHTML =
"<strong>Position Details:</strong><br>" +
"Latitude: " + position.coords.latitude + "<br>" +
"Longitude: " + position.coords.longitude + "<br>" +
"Accuracy: " + position.coords.accuracy + " meters<br>" +
"Timestamp: " + new Date(position.timestamp);
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
resultElement.innerHTML = "User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
resultElement.innerHTML = "Location information is unavailable.";
break;
case error.TIMEOUT:
resultElement.innerHTML = "The request to get user location timed out.";
break;
default:
resultElement.innerHTML = "An unknown error occurred.";
break;
}
}
</script>
</body>
</html>
The output displays a button that, when clicked, requests the user's location and shows the coordinates −
Position Details: Latitude: 40.7128 Longitude: -74.0060 Accuracy: 20 meters Timestamp: Wed Dec 13 2023 10:30:45 GMT-0500 (EST)
Advanced Position Information Example
Following example shows how to access all available position properties −
<!DOCTYPE html>
<html>
<head>
<title>Complete Position Information</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Complete Geolocation Data</h2>
<button onclick="getFullPosition()" style="padding: 8px 16px;">Get Full Position Info</button>
<div id="fullData" style="margin-top: 15px; padding: 15px; background-color: #f9f9f9; border-left: 4px solid #4CAF50;"></div>
<script>
function getFullPosition() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayFullData);
} else {
document.getElementById("fullData").innerHTML = "Geolocation not supported.";
}
}
function displayFullData(position) {
var coords = position.coords;
var html = "<h3>Position Object Properties:</h3>";
html += "<p><strong>Coordinates:</strong></p>";
html += "? Latitude: " + coords.latitude + "°<br>";
html += "? Longitude: " + coords.longitude + "°<br>";
html += "? Accuracy: " + coords.accuracy + " meters<br>";
if (coords.altitude !== null) {
html += "? Altitude: " + coords.altitude + " meters<br>";
} else {
html += "? Altitude: Not available<br>";
}
if (coords.altitudeAccuracy !== null) {
html += "? Altitude Accuracy: " + coords.altitudeAccuracy + " meters<br>";
} else {
html += "? Altitude Accuracy: Not available<br>";
}
if (coords.heading !== null) {
html += "? Heading: " + coords.heading + "°<br>";
} else {
html += "? Heading: Not available<br>";
}
if (coords.speed !== null) {
html += "? Speed: " + coords.speed + " m/s<br>";
} else {
html += "? Speed: Not available<br>";
}
html += "<p><strong>Timestamp:</strong> " + new Date(position.timestamp) + "</p>";
document.getElementById("fullData").innerHTML = html;
}
</script>
</body>
</html>
This example displays all available position properties, including those that may be null depending on the device capabilities.
Position Options
You can configure position retrieval using options parameter −
<!DOCTYPE html>
<html>
<head>
<title>Position with Options</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>High Accuracy Position</h2>
<button onclick="getHighAccuracyPosition()" style="padding: 8px 16px;">Get High Accuracy Position</button>
<p id="accuracyResult" style="margin-top: 15px; padding: 10px; background-color: #e8f4f8;"></p>
<script>
function getHighAccuracyPosition() {
var options = {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 60000
};
if (navigator.geolocation) {
document.getElementById("accuracyResult").innerHTML = "Getting high accuracy position...";
navigator.geolocation.getCurrentPosition(showAccuratePosition, showError, options);
} else {
document.getElementById("accuracyResult").innerHTML = "Geolocation not supported.";
}
}
function showAccuratePosition(position) {
var result =
"High Accuracy Position:<br>" +
"Latitude: " + position.coords.latitude.toFixed(6) + "°<br>" +
"Longitude: " + position.coords.longitude.toFixed(6) + "°<br>" +
"Accuracy: " + position.coords.accuracy + " meters<br>" +
"Retrieved at: " + new Date(position.timestamp).toLocaleTimeString();
document.getElementById("accuracyResult").innerHTML = result;
}
function showError(error) {
document.getElementById("accuracyResult").innerHTML = "Error: " + error.message;
}
</script>
</body>
</html>
This example uses high accuracy settings to get more precise location data, with a timeout of 10 seconds.
Browser Compatibility
The Geolocation position property is supported in all modern browsers. However, it requires user permission and HTTPS for security reasons in most browsers. The availability of certain properties like altitude, heading, and speed depends on the device capabilities.
Common Use Cases
Location-based services − Finding nearby restaurants, stores, or services
Navigation apps − Providing turn-by-turn directions
Weather applications − Showing local weather conditions
Social media − Tagging posts with location information
Emergency services − Locating users for assistance
Conclusion
The HTML DOM Geolocation position property provides essential location data through the coords and timestamp properties. The coords object contains comprehensive positioning information including latitude, longitude, and accuracy, while optional properties like altitude and speed depend on device capabilities. Always implement proper error handling when using geolocation features.
242 Views
