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 −

PropertyDescription
position.coordsTo 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.timestampTo 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>

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;
}
raja
Published on 09-Aug-2019 11:30:37
Advertisements