HTML Geolocation watchPosition() Method
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:
.png)
