Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!