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:
Share your thoughts in the comments
Please Login to comment...