The Geolocation position property in HTML DOM is used to return the position of a device on Earth. The returned Coordinates object could be used for various purposes including navigation and tracking the position of the device.
Return Value:
- position.coords: The coordinates object that has all the information of the current location.
- position.timestamp: It represents the DOMTimeStamp which represents the time when the location is obtained.
Usage: Methods like getCurrentPosition() or watchPosition() are used to pass a callback to a function and then access the position property.
Example:
html
<!DOCTYPE html> <html>
<title>
DOM Geolocation position Property
</title>
<body>
<h1 style = "color: green">
GeeksforGeeks
</h1>
<b>
DOM Geolocation position Property
</b>
<p>
Click the button to get your position.
</p>
<button onclick = "getLocation()">
Get Location
</button>
<p class = "location"></p>
<script>
let x = document.querySelector('.location');
function getLocation() {
/* Check if location support is available */
if (navigator.geolocation) {
/* Callback to the showPosition function */
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " +
/* Get the latitude from the Coordinates object */
position.coords.latitude +
"<br>Longitude: " +
/* Get the longitude from the Coordinates object */
position.coords.longitude +
"<br>Timestamp: " +
/* Get the timestamp of the location obtained */
position.timestamp;
}
</script>
</body>
</html>
|
Output: Before Click on the button:
After Click on the button:
Supported Browsers: The browser supported by DOM Geolocation position property are listed below:
- Google Chrome 79.0 and above
- Edge 79.0 and above
- Internet Explorer 9.0
- Firefox 72.0 and above
- Opera 16.0 and above
- Safari 13.1 and above