Posted By
Bajarangi soft ,
Posted On 24-09-2020
HTML Geolocation Use:
The getCurrentPosition() method is used to return the user's position.
Example (1)
<script>
var x = document.getElementById("location");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
The example above basic Geolocation script, with no error handling.
First checks if Geolocation is supported or not.
If supported, execute the getCurrentPosition() function. If not, display a message to the user
If the getCurrentPosition() method is successful, show position to user.
The showPosition() method outputs the Latitude and Longitude
Complete Code for Example (1):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geolocation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="text-center">
<h1>HTML | Geolocation</h1>
</div>
<br>
<h2></h2>
<div class="well">
<h1>Click the button to get your location.</h1>
<button class="btn btn-primary btn-lg" onclick="getLocation()">getLocation</button>
<h2 id="location"></h2>
<script>
var x = document.getElementById("location");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported .";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</div>
<br>
</div>
</body>
</html>
Handling Errors and Rejections:
The getCurrentPosition() function is used to handle errors and it specifies a function to run if it failed to get the user's location.
ERROR DESCRIPTION
UNKNOWN_ERRROR -> An unknown error
PERMISSION_DENIED -> The application doesn’t have the permission to make use of location services
POSITION_UNAVAILABLE -> The location of the device is uncertain
TIMEOUT -> Time to fetch location information exceeded the maximum timeout interval
Example (2)
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
Complete Code for Example (2):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geolocation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div class="container">
<div class="text-center">
<h1>HTML | Geolocation</h1>
</div>
<br>
<div class="well">
<h3>Click the button to get your location with error handling</h3>
<button class="btn btn-primary btn-lg" onclick="getlocation();">
getlocation
</button>
<h3 id="location"></h3>
<script>
var variable1 = document.getElementById("location");
function getlocation(){
navigator.geolocation.getCurrentPosition(showLoc, showError);
}
function showLoc(pos){
variable1.innerHTML = "Latitude: " + pos.coords.latitude +
"<br>Longitude: " + pos.coords.longitude;
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
Displaying result in MAP:
Displaying location in a map.
Example(3)
function showLocation(pos) {
latt = pos.coords.latitude;
long = pos.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
var OPTions = {
center: lattlong,
zoom: 10,
mapTypeControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
}
var mapg = new google.maps.Map(document.getElementById("location"), OPTions);
var markerg =
new google.maps.Marker({position: lattlong, map: mapg, title: "You are here!"});
}
Complete Code for Example (3):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geolocation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div class="container">
<div class="text-center">
<h1>HTML | Geolocation</h1>
</div>
<br>
<div class="well">
<h3>Click the button to get your location in map</h3>
<button class="btn btn-primary btn-lg" onclick="getlocation();">
getlocation
</button>
<div id="location" style="width: 100%; height: 500px;"></div>
</div>
<script type="text/javascript">
function getlocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showLocation, showError);
}
}
function showLocation(pos) {
latt = pos.coords.latitude;
long = pos.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
var OPTions = {
center: lattlong,
zoom: 10,
mapTypeControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
}
var mapg = new google.maps.Map(document.getElementById("location"), OPTions);
var markerg =
new google.maps.Marker({position: lattlong, map: mapg, title: "You are here!"});
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
Location Properties: The following table determines properties used in getCurrentPosition() and their returning values.
Property Returns
coords.latitude -> The latitude as a decimal number (always returned)
coords.longitude -> The longitude as a decimal number (always returned)
coords.accuracy -> The accuracy of position (always returned)
coords.altitude -> The altitude in meters above the mean sea level (returned if available)
coords.altitude -> Accuracy The altitude accuracy of position (returned if available)
coords.heading -> The heading as degrees clockwise from North (returned if available)
coords.speed -> The speed in meters per second (returned if available)
timestamp -> The date/time of the response (returned if available)
Geolocation Methods: The Geolocation has following methods which make it interesting and easier to work.
METHODA DESCRIPTION
getCurrentPosition() ->fetches the current location of the user
watchPosition() ->fetches periodic updates of user’s current location
clearWatch() ->cancels a watchPosition call currently in execution