HTML Geolocation watchPosition() Method (original) (raw)

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 `

GeeksforGeeks

Displaying Latitude and Longitude

<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>

Output:

Example 2: Display Timestamp

HTML `

GeeksforGeeks

Displaying Timestamp

<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>

Output:

Example 3: Display Speed

HTML `

GeeksforGeeks

Displaying Timestamp

<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>

Output:

Example 4: Display Altitude

HTML `

GeeksforGeeks

Displaying Altitude

<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>

Output:

Example 5: Display Accuracy

HTML `

GeeksforGeeks

Displaying Accuracy

<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>

Output: