Skip to content
Related Articles

Related Articles

Which method can be used to get the user’s current location in HTML ?

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 10 Mar, 2022

In this article, we will discuss the method to get the user’s current location in an HTML document. We will use the Navigator geolocation property that will help us to achieve it. The Navigator geolocation property is used to return a geolocation object by the browser which can be used to locate the user’s position in the HTML document. It is a read-only property and is only available on the approval of the user since it can compromise the user’s privacy.

Syntax:

navigator.geolocation

In order to get the current location of the user, we are going to use the getCurrentPosition() method which is available in the Navigator geolocation property. The getCurrentPosition() method is used for getting the current location of the user.

Syntax:

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

Parameter values:

  • success: This is a function that is called after the data is successfully gathered by the getCurrentPosition() method.
  • error: This is a function that executes when some warning or error occurred.
  • options: This is an object that helps us to set an optional timeout, enableHighAccuracy, or maximumAge properties.

Please refer to the HTML Geolocation article for the various properties, methods & their implementation in detail.

Example 1: The below example illustrates how to get the user’s current location using the Geolocation getCurrentPosition() Method.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script>
        // Success function
        function successFunction(value) {
            var lat = value.coords.latitude;
            var long = value.coords.longitude;
            document.getElementById('error')
              .innerHTML = "";
            document.getElementById('latitude')
              .innerHTML = `Latitude: ${lat}`;
            document.getElementById('longitude')
              .innerHTML = `Latitude: ${long}`;
        }
 
        // Error Function
        function errorFunction(err) {
            document.getElementById('latitude')
              .innerHTML = "";
            document.getElementById('longitude')
              .innerHTML = "";
            document.getElementById('error')
              .innerHTML = `Error occurred: ${err.message}`;
        }
         
        // Main function to get location
        function getLocation() {
            navigator.geolocation
              .getCurrentPosition(
                successFunction, errorFunction
              );
        }
    </script>
</head>
 
<body>
    <center>
        <h1 style="color : green">
          GeeksforGeeks
        </h1>
        <div>
            <button onclick="getLocation()">
              Get Location
            </button>
            <h2 id="latitude"></h2>
            <h2 id="longitude"></h2>
            <h2 id="error"></h2>
        </div>
    </center>
</body>
 
</html>

Output:

Example 2: The below example illustrates how the timeout parameter works in  Geolocation getCurrentPosition() Method.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        #timeout {
            width: 300px;
            height: 30px;
            margin: 10px;
            font-size: 20px;
        }
    </style>
    <script>
        // Success function
        function successFunction(value) {
            var lat = value.coords.latitude;
            var long = value.coords.longitude;
            document.getElementById('error')
              .innerHTML = "";
            document.getElementById('latitude')
              .innerHTML = `Latitude: ${lat}`;
            document.getElementById('longitude')
              .innerHTML = `Latitude: ${long}`;
        }
        // Error Function
        function errorFunction(err) {
            document.getElementById('latitude')
              .innerHTML = "";
            document.getElementById('longitude')
              .innerHTML = "";
            document.getElementById('error')
              .innerHTML = `Error occurred: ${err.message}`;
        }
        // Main function to get location
        function getLocation() {
            const timeOut = document
            .getElementById('timeout').value;
            const options = {
                timeout: timeOut == "" ? 5000 : timeOut
            }
            navigator
              .geolocation
              .getCurrentPosition(
                successFunction, errorFunction, options
              );
        }
    </script>
</head>
 
<body>
   <center>
        <h1 style="color : green">GeeksforGeeks</h1>
        <div>
            <input id="timeout" type="number"
                   placeholder="Enter the timeout in milliseconds">
            <br />
            <button onclick="getLocation()">
              Get Location
            </button>
            <h2 id="latitude"></h2>
            <h2 id="longitude"></h2>
            <h2 id="error"></h2>
        </div>
    </center>
</body>
 
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!