Latitude and longitude of the user's position in JavaScript?

Front End Technology Javascript Object Oriented Programming

The user's current location can be found using the getCurrentPosition() method. The Geolocation API that HTML5 offers us allows us to know the user's geographic location. The Geolocation API provides the latitude and longitude of the user's current location, that are thereafter delivered to the backend via JavaScript and displayed on the website.

The read-only longitude property of the GeolocationCoordinates interface is a double-precision floating point value that indicates a location's longitude, expressed in decimal degrees.

The GeolocationCoordinates object is a component of the GeolocationPosition interface, since it is the object type delivered by Geolocation API calls which collect and deliver a geographical position, together with a DOMTimeStamp giving a time of measurement.

Syntax

navigator.geolocation.getCurrentPosition(success, error, options);

Parameters − It contains three parameters, which are listed below and are detailed above:

success − This is a function that is used when the data from the getCurrentPosition() API method has been successfully collected.
error − It also includes a callback function that sends back the location's warnings and errors.
options − Setting a timer, enabling High Accuracy, and the maximumAge is helpful.

Value

The longitude value, specified in decimal degrees, represents the exact location on Earth that the Coordinates object describes. The World Geodetic System definition from 1984 specifies the value (WGS 84).

Example 1

The example following uses the user's geolocation to demonstrate the Geolocation getCurrentPosition() Method.


<!DOCTYPE html>
<html>
<title>Latitude and longitude of the user's position in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <h1 style="color: rgba(14, 21, 126, 0.908)">Welcome To Tutorialspoint!</h1>
   <h3>Click the button to identify the users location</h3>
   <div>
      <button onclick="myGeolocator()">
         Get location
      </button>
      <div id="result"></div>
   </div>   
   <script>
      let result = document.getElementById("result");
      let userLocation = navigator.geolocation;
      function myGeolocator() {
         if(userLocation) {
            userLocation.getCurrentPosition(success);
         } else {
            "The geolocation API is not supported by your browser.";
         }
      }
      function success(data) {
         let lat = data.coords.latitude;
         let long = data.coords.longitude;
         result.innerHTML = "Latitude: "
         + lat
         + "<br>Longitude: "
         + long;
      }
   </script>
</body>
</html>

Example 2

In this example let us understand how to get accuracy and timestamp.


<!DOCTYPE html>
<html>
<title>Latitude and longitude of the user's position in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <h1 style="color: rgba(14, 21, 126, 0.908)">Welcome To Tutorialspoint!</h1>
   <h3>Click the button to get accuracy and timestamp of the users location</h3>
   <div>
      <button onclick="myGeolocator()">
         Get accuracy and timestamp
      </button>
      <div id="result"></div>
   </div>   
   <script>
      let result = document.getElementById("result");
      let userLocation = navigator.geolocation;
      function myGeolocator() {
         if (userLocation) {
            userLocation.getCurrentPosition(success);
         } else {
            "The geolocation API is not supported by your browser";
         }
      }
      function success(data) {
         let accur = data.coords.accuracy;
         let timstamp = data.timestamp;
         result.innerHTML = "Accuracy: "
         + accur
         + "<br>Time Stamp: "
         + timstamp;
      }
   </script>
</body>
</html>

Manisha Patil

Updated on: 23-Aug-2022

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started