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

Last Updated : 04 Apr, 2023

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>