Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 Coordinates 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 wants to give coordinates before this property could work. This is done so that a user’s privacy isn’t compromised. This can be used for tracking various device's location.
Properties
Following are the coordinates property −
Note − All these properties are read-only and their return type is double.
| Sr.No | Property & Description |
|---|---|
| 1 |
coordinates.latitude To return the device position’s latitude in decimal degrees. |
| 2 |
coordinates.longitude To return the device position's longitude in decimal degrees |
| 3 |
coordinates.altitude To return the position's altitude in meters, relative to sea level. It can return null if there is no GPS in the device. |
| 4 |
coordinates.accuracy To return the accuracy of the latitude and longitude properties in meters |
| 5 |
coordinates.altitudeAccuracy To returns the accuracy of the altitude property in meters |
| 6 |
coordinates.heading To return the direction in which the device is traveling. This value, specified in degrees, indicates how far off from heading true north the device is. 0 degrees represents true north, and the direction is determined clockwise (east is 90 degrees and west is 270 degrees). If speed is 0, the heading is NaN. If the device is unable to provide heading information, this value is null |
| 7 |
coordinates.speed To return the velocity of the device in meters per second. This value can be null. |
Syntax
Following is the syntax for the GeoLocation coordinates property −
coordinates.property
The “property” can be one of the above properties mentioned in the table.
Example
Let us look at an example for the GeoLocation coordinates 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 and clicking Allow on the “Know your location” popup −
In the above example −
We have first created a button COORDINATES that will execute the getCoords() method on being 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;
}
149 Views
