Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Geolocation position property
The HTML DOM Geolocation coordinates property is used for getting a user’s device position and altitude on earth. The user have to approve that he/she wants to give coordinates before this property could work. This is done so that users privacy isn’t compromised. This can be used for tracking various devices location.
Properties
Following is the position property −
Note − The below properties are read-only −
| Property | Description |
|---|---|
| position.coords | To return a coordinates object having information like latitude, longitude, altitude, and speed of the device on the earth. It also has an accuracy value describing how accurate the measurements are in meters. |
| position.timestamp | To representing the time and date at which the position object was created. It returns a DOMTimeStamp representing that time. |
Syntax
Following is the syntax for Geolocation position property −
position.property
Here, the property can be one of the two properties in the above table.
Example
Let us look at an example of the Geolocation position property −
<!DOCTYPE html>
<html>
<body>
<h1>Geolocation coordinates property</h1>
<p>Get you coordinates by clicking the below button</p>
<button onclick="getCoords()">COORDINATES</button>
<p id="Sample">Your coordinates are:</p>
<script>
var p = document.getElementById("Sample");
function getCoords() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showCoords);
} else {
p.innerHTML ="This browser doesn't support geolocation.";
}
}
function showCoords(position) {
p.innerHTML = "Longitude:" + position.coords.longitude +
"<br>Latitude: " + position.coords.latitude+"
<br>Accuracy: "+ position.coords.accuracy;
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the COORDINATES button −
In the above example −
We have first created a button COORDINATES that will execute the getCoords() method when clicked by the user −
<button onclick="getCoords()">COORDINATES</button>
The getCoords() function gets the navigator object geolocation property to check if the browser supports geolocation or not. If the browser supports geolocation, it will return a Geolocation object. Using the getCurrentPosition() method of the navigator geolocation property we get the current position of the device. The getCurrentPosition() method is a callback function and it takes a function as an object for its parameter since every function is an object in JavaScript.
Here, we passed the showCoords() method to it. The showCoords() method takes a position interface as parameter and use it to display longitude, latitude and accuracy inside a paragraph with id “Sample”. It uses the paragraph innerHTML property to append text to it −
function getCoords() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showCoords);
} else {
p.innerHTML ="This browser doesn't support geolocation.";
}
}
function showCoords(position) {
p.innerHTML = "Longitude:" + position.coords.longitude +
"<br>Latitude: " + position.coords.latitude+"<br>Accuracy: "+ position.coords.accuracy;
}
114 Views
To Continue Learning Please Login