HTML Geolocation watchPosition() Method - GeeksforGeeks

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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
anikaseth98
HTML-Methods
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
REST API (Introduction)
Design a web page using HTML and CSS
Form validation using jQuery
How to place text on image using HTML and CSS?
How to auto-resize an image to fit a div container using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript