Skip to content
Related Articles

Related Articles

How to locate the user’s position in HTML ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 30 Jan, 2022

In this article, we will discuss how to locate the user’s position in HTML.

Approach: The getCurrentPosition() method is used to locate the current location of the user.HTML5 provides us with the Geolocation API which helps us to identify the geographic location of the user. The Geolocation API gives the latitude and longitude of the user’s current location which are further sent to the backend using JavaScript and then the current location of the user is shown on the website.

Syntax:

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

Parameters: It has three parameters as mentioned above and described below:

  • success: It is a function that is called after the data is successfully gathered by the getCurrentPosition() method from the API.
  • error: It is also a callback function that returns the warnings and the error messages of the location.
  • options: It helps us to set a timeout, enableHighAccuracy, and the maximumAge.

Example: The below example illustrate the Geolocation getCurrentPosition() Method by checking the user’s geolocation.

HTML




<!DOCTYPE html>
<html>
<body>
    <h1 style="color: green">Welcome To GFG</h1>
    <h3>How to locate the user's position in HTML?</h3>
    <div>
        <button onclick="geolocator()">
          Click to get location
        </button>
        <p id="paraGraph"></p>
  
  
    </div>
    <script>
        var paraGraph = document.getElementById("paraGraph");
        var user_loc = navigator.geolocation;
      
        function geolocator() {
            if(user_loc) {
                user_loc.getCurrentPosition(success);
            } else {
                "Your browser doesn't support geolocation API";
            }
        }
      
        function success(data) {
            var lat = data.coords.latitude;
            var long = data.coords.longitude;
            paraGraph.innerHTML = "Latitude: "
            + lat
            + "<br>Longitude: "
            + long;
        }
    </script>
</body>
  
</html>

Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green">Welcome To GFG</h1>
    <div>
        <button onclick="geolocator()">
            Click to get accuracy and timestamp
        </button>
        <p id="paraGraph"></p>
  
  
    </div>
    <script>
        var paraGraph = document.getElementById("paraGraph");
        var user_loc = navigator.geolocation;
  
        function geolocator() {
            if (user_loc) {
                user_loc.getCurrentPosition(success);
            } else {
                "Your browser doesn't support geolocation API";
            }
        }
  
        function success(data) {
            var accu = data.coords.accuracy;
            var tmstmp = data.timestamp;
            paraGraph.innerHTML = "Accuracy: "
                + accu
                + "<br>Time Stamp: "
                + tmstmp;
        }
    </script>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!