HTML DOM Geolocation coordinates property

HTMLWeb DevelopmentFront End Technology

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.NoProperty & Description
1coordinates.latitude
To return the device position’s latitude in decimal degrees.
2coordinates.longitude
To return the device position's longitude in decimal degrees
3coordinates.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.
4coordinates.accuracy
To return the accuracy of the latitude and longitude properties in meters
5coordinates.altitudeAccuracy
To returns the accuracy of the altitude property in meters
6coordinates.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
7coordinates.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;
}
raja
Published on 20-Aug-2019 07:28:46
Advertisements