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:
Similar Reads
HTML DOM Geolocation position Property The Geolocation position property in HTML DOM is used to return the position of a device on Earth. The returned Coordinates object could be used for various purposes including navigation and tracking the position of the device. Return Value: position.coords: The coordinates object that has all the i
2 min read
HTML Geolocation clearWatch() Method In this article, we will learn the HTML geolocation clearWatch() method and its implementation. The clearWatch() method is used to cancel the currently running watchPosition() call and removes the location or errors generated as a result of the previous call.Syntax:navigator.geolocation.clearWatch(c
2 min read
HTML DOM Navigator geolocation Property The Navigator geolocation property is used to return a geolocation object by the browser which can be used to locate a user's position. It is a read-only property and is only available on the approval of the user since it can compromise the user's privacy. Syntax: navigator.geolocation Below program
1 min read
HTML DOM Geolocation timestamp Property In this article, we will discuss the Geolocation timestamp property. Geolocation in HTML is used to get the geographical position of a user. The getCurrentPosition() method, in this geolocation, returns an object on success. Syntax: timestamp Return Value:- This geolocation property returns an objec
1 min read
HTML Geolocation The HTML Geolocation is used to get the geographical position of a user. Due to privacy concerns, this position requires user approval. Geo-location in HTML5 is used to share the location with some websites and be aware of the exact location. It is mainly used for local businesses, and restaurants,
5 min read
HTML Geolocation The HTML Geolocation is used to get the geographical position of a user. Due to privacy concerns, this position requires user approval. Geo-location in HTML5 is used to share the location with some websites and be aware of the exact location. It is mainly used for local businesses, and restaurants,
5 min read