HTML Geolocation watchPosition() Method

Last Updated : 20 Dec, 2021

In this article, we will discuss the Geolocation watchPosition() method. Geolocation in HTML is used to register a handler function that will be called automatically each time the position of the device changes.

Syntax:

navigator.geolocation.watchPosition(showLoc, error, options);

Parameter:

showLoc: It is also a function for success message that will display latitude, longitude, timestamp, etc
error: It will return the error messages and warnings of the position if applicable
options: It is used to set enableHighAccuracy, timeout, and maximumAge

Where showLoc success message includes the following:

latitude: This property will return the latitude of the given location
longitude: This property will return the longitude of the given location
timestamp: This property will return the timestamp of the given location
speed: This property will return the speed of the given location
altitude: This property will return the altitude above the sea level of the given location
accuracy: This property will return the accuracy above the sea level of the given location

Example: This example display the latitude and longitude of the watchPosition() method.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width,initial-scale=1" />
</head>
 
<body>
    <h2 style="color: green">GeeksforGeeks</h2>
     
<p><b> Displaying Latitude and Longitude</b></p>
 
    <button onclick="getlocation()">Click Me</button>
    <p id="paraID"></p>
 
 
    <p id="paraID1"></p>
 
 
    <script>
        var variable1 = document.getElementById("paraID");
        var variable2 = document.getElementById("paraID1");
 
        // This function will get your current location
        function getlocation() {
            navigator.geolocation.watchPosition(showLoc);
        }
 
        // This function will show your current location
        function showLoc(pos) {
            variable1.innerHTML = "Latitude: " +
                pos.coords.latitude;
 
            variable2.innerHTML = "Longitude: " +
                pos.coords.longitude;
        }
    </script>
</body>
 
</html>

Output:

Example 2: Display Timestamp

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width,initial-scale=1" />
</head>
 
<body>
    <h2 style="color: green">GeeksforGeeks</h2>
     
<p><b> Displaying Timestamp</b></p>
 
    <button onclick="getlocation()">Click Me</button>
    <p id="paraID"></p>
 
 
    <script>
        var variable1 = document.getElementById("paraID");
 
        // This function will get your current location 
        function getlocation() {
            navigator.geolocation.watchPosition(showLoc);
        }
 
        // This function will show your current location
        function showLoc(pos) {
            variable1.innerHTML = "Timestamp: " +
                pos.timestamp;
        }
    </script>
</body>
 
</html>

Output:

Example 3: Display Speed

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width,initial-scale=1" />
</head>
 
<body>
    <h2 style="color: green">GeeksforGeeks</h2>
     
<p><b> Displaying Timestamp</b></p>
 
    <button onclick="getlocation()">Click Me</button>
    <p id="paraID"></p>
 
 
    <script>
        var variable1 = document.getElementById("paraID");
 
        // This function will get your current location 
        function getlocation() {
            navigator.geolocation.watchPosition(showLoc);
        }
 
        // This function will show your current location
        function showLoc(pos) {
            variable1.innerHTML = "Timestamp: " +
                pos.timestamp;
        }
    </script>
</body>
 
</html>

Output:

Example 4: Display Altitude

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width,initial-scale=1" />
</head>
 
<body>
    <h2 style="color: green">GeeksforGeeks</h2>
     
<p><b> Displaying Altitude</b></p>
 
    <button onclick="getlocation()">Click Me</button>
    <p id="paraID"></p>
 
 
    <script>
        var variable1 = document.getElementById("paraID");
 
        // This function will get your current location
        function getlocation() {
            navigator.geolocation.watchPosition(showLoc);
        }
 
        // This function will show your current location
        function showLoc(pos) {
            variable1.innerHTML = "Altitude: " +
                pos.coords.altitude;
        }
    </script>
</body>
 
</html>

Output:

Example 5: Display Accuracy

HTML

<!DOCTYPE html>
<html>
 
<body>
    <h2 style="color: green">GeeksforGeeks</h2>
     
<p><b> Displaying Accuracy</b></p>
 
    <button onclick="getlocation()">Click Me</button>
    <p id="paraID"></p>
 
 
    <script>
        var variable1 = document.getElementById("paraID");
 
        // This function will get your current location
        function getlocation() {
            navigator.geolocation.watchPosition(showLoc);
        }
 
        // This function will show your current location
        function showLoc(pos) {
            variable1.innerHTML = "Accuracy: " +
                pos.coords.accuracy;
        }
    </script>
</body>
 
</html>