The Geolocation is one of the best HTML5 API which is used to identify the user’s geographic location for the web application.
This new feature of HTML5 allows you to navigate the latitude and longitude coordinates of the current website’s visitor. These coordinates can be captured by JavaScript and send to the server which can show your current location on the website
Most of the geolocation services use Network routing addresses such as IP addresses, RFID, WIFI and MAC addresses or internal GPS devices to identify the user’s location.
Tips: To completely understand the concept of Geolocation API you must have some knowledge of JavaScript.
User privacy:
The user’s location is the privacy concern, so geolocation API protects the user’s privacy by taking the user’s permission before getting the location. Geolocation API sends a notification prompt box which user can allow or deny, and if the user allows then only his location will be identified.
Note: Your browser must support the geolocation to use it for the web application. Although most of the browsers and mobile devices support the Geolocation API, and this API is only available for HTTPS request.
Geolocation object
The Geolocation API is work with the navigation.geolocation object. Its read-only property returns a Geolocation object which identifies the location of the user and can generate a customized result based on user location.
Syntax:
geo=navigator. geolocation; If this object is present, then you can get the geolocation services.
Geolocation Methods
The Geolocation API uses three methods of Geolocation interface which are given following:
| Methods | Description |
|---|---|
| getCurrentPosition() | It identifies the device or the user’s current location and returns a position object with data. |
| watchPosition() | Return a value whenever the device location changes. |
| clearWatch() | It cancels the previous watchPosition() call |
Checking for browser support:
The geolocation property of navigator.geolcation object helps to determine the browser support for the Geolocation API.
<!DOCTYPE html>
<html>
<head>
<title>Geolocation API</title>
</head>
<body>
<h1>Find your Current location</h1>
<button onclick="getlocation()">Click me</button>
<div id="location"></div>
<script>
var x= document.getElementById("location");
function getlocation() {
if(navigator.geolocation){
alert("your browser is supporting Geolocation API")
}
else
{
alert("Sorry! your browser is not supporting")
}
}
</script>
</body>
</html>
Getting the User’s current position:
To get the user’s current location, getCurrentPosition() method of the navigator.geolocation object is used. This method accepts three parameters:
- success: A success callback function to get the location of the user
- error: An error callback function which takes “Position Error” object as input.
- options: It defines various options for getting the location.
The below example will return the longitude and latitude of the visitor’s current location.
Example
<!DOCTYPE html>
<html>
<head>
<title>Geolocation API</title>
</head>
<body>
<h1>Find your Current location</h1>
<button onclick="getlocation()">Click me</button>
<div id="location"></div>
<script>
var x= document.getElementById("location");
function getlocation() {
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition)
}
else
{
alert("Sorry! your browser is not supporting")
} }
function showPosition(position){
var x = "Your current location is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
document.getElementById("location").innerHTML = x;
}
</script>
</body>
</html>
Explanation:
- First checking the browser support
- Getting current position with getCurrentPosition()
- Getting latitude and longitude values with showPosition() method which is call back method of getCurrentPosition().
Handling Errors and Rejections: Using an Error callback function
The second parameter of getCurrentPosition is an error Callback function. It is an optional parameter and used to handle errors and user rejection while getting the user’s location.
Following are the possible options for invoking the error call back function:
- Unknown random error Occurred
- If the user has denied for sharing location
- Location information is not available
- Request for location is timed-out.
Example
function showError(error) {
switch(error.code){
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation API.");
break;
case error.POSITION_UNAVAILABLE:
alert("USer location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
Displaying location on Google Map
Till now, we have seen how to show your location using latitude and longitude values, but it is not sufficient. Hence we can also show the exact location on Google map with this API.
Following example showing the location using Google Map.
Example
<!DOCTYPE html>
<html>
<head>
<title>Geolocation API</title>
</head>
<body>
<h2>Find Your Location in below Map</h2>
<button onclick="getlocation();"> Show Position</button>
<div id="demo" style="width: 600px; height: 400px; margin-left: 200px;"></div>
<script src="https://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function getlocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPos, showErr);
}
else{
alert("Sorry! your Browser does not support Geolocation API")
}
}
//Showing Current Poistion on Google Map
function showPos(position){
latt = position.coords.latitude;
long = position.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
var myOptions = {
center: lattlong,
zoom: 15,
mapTypeControl: true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL}
}
var maps = new google.maps.Map(document.getElementById("demo"), myOptions);
var markers =
new google.maps.Marker({position:lattlong, map:maps, title:"You are here!"});
}
//Handling Error and Rejection
function showErr(error) {
switch(error.code){
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation API.");
break;
case error.POSITION_UNAVAILABLE:
alert("USer location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
} </script>
</body>
</html>
Location properties
The getCurrentPosition() method of Geolocation API returns callback methods which retrieve the user location information. This callback method returns a Position Object which contains all location information and specifies different properties. It always returns latitude and longitude properties, but the following table describes some other properties of Position object.
| Properties | Description |
|---|---|
| coords.latitude | It returns latitude of user location as a decimal number. |
| coords.longitude | It returns longitude of user location as a decimal number. |
| coords.altitude | It returns altitude in meters above the sea level (Only if available). |
| coords.accuracy | It returns the accuracy of the user’s position. |
| coords.altitudeAccuracy | It returns the altitude accuracy of user location. (If available) |
| coords.heading | It returns headings as degree clockwise from North. (If available) |
| coords.speed | It returns the speed in meter per seconds. (If available). |
| timestamp | It returns data or time of response. (If available). |
Leave a Reply