Open In App
Related Articles

HTML Geolocation watchPosition() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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>

                    

Output:



Last Updated : 20 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads