The HTML Geolocation is used to get the real time geographical position of a user, only if they allow it. It can be used for a variety of reasons. It uses JavaScript to get the latitude and longitude.
NOTE − Before Google Chrome 50, geolocation requests could be approved but as of Chrome 50 only requests via HTTPS are approved and requests via HTTP are ignored.
Syntax
Following is the syntax −
navigator.geolocation.getCurrentPosition()
Here, object returned by getCurrentPosition() can have the following properties −
| Property | Return Value |
|---|---|
| coords.latitude | Geographical latitude as a decimal number |
| coords.longitude | Geographical longitude as a decimal number |
| coords.accuracy | Accuracy of position |
| coords.altitude | Altitude in meters above the mean sea level |
| coords.altitudeAccuracy | Altitude accuracy of position |
| coords.heading | Heading as degrees clockwise from North |
| coords.speed | Speed in meters per second |
| imestamp | The date/time of the response |
Let’s see an example of how HTML geolocation provides error handling −
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-Geolocation</legend>
<input type="button" value="Update Location" onclick="updateLocation()">
<input type="button" value="Search" onclick="searchLoc()">
<div id="divDisplay">Current Location:</div>
<div>
<span id="latitude">Latitude: 42.9177901</span>
<span id="longitude">Longitude: -75.8114698</span>
</div>
<script>
var latObj = document.getElementById("latitude");
var longObj = document.getElementById("longitude");
var divDisplay = document.getElementById("divDisplay");
function searchLoc(){
var lat = latObj.textContent.split(": ")[1];
var long = longObj.textContent.split(": ")[1];
var url = "https://www.google.com/maps/@"+lat+","+long+",8.58z";
browseWindow = window.open(url, "browseWindow", "width=400, height=200");
}
function updateLocation(){
browseWindow.close();
var user = navigator.geolocation;
if (user)
user.getCurrentPosition(updatePosition, errorHandler);
else
divDisplay.textContent = "Geolocation is not supported in this browser";
}
function updatePosition(position) {
divDisplay.innerHTML = 'Location Updated<br>Current Location:';
latObj.textContent = 'Latitude: '+position.coords.latitude;
longObj.textContent = 'Longitude: '+position.coords.longitude;
}
function errorHandler(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
divDisplay.textContent = "You denied the request to get Geolocation"
break;
case error.POSITION_UNAVAILABLE:
divDisplay.textContent = "Your location information is unavailable"
break;
case error.TIMEOUT:
divDisplay.textContent = "The request to get your location timed out"
break;
case error.UNKNOWN_ERROR:
divDisplay.textContent = "Unknown error occurred"
break;
}
}
</script>
</body>
</html>1) Before clicking any button −
2) After clicking ‘Search’ button −
3) After clicking ‘Update Location’ button −
4) After clicking ‘Search’ button −
5) After clicking ‘Update Location’ button and user denies location access permission −
