HTML5 Geolocation

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:

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>

Test it Now

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>

Test it Now

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;
	}
     	}

Test it Now

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>     

Test it Now

To learn more about Google Maps JavaScript API, you can click on the following link:

https://developers.google.com/maps/documentation/javascript/reference.

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).

Watching the current location:

If we want to know the user location while he is moving and want accurate location at every changed position, then it can be achieved by using watchPosition() callback function.

This function has all three parameters which getCurrentPosition() contains.

Syntax:

The watchPosition() method returns an ID that can be used to uniquely identifying the user?s position, and this ID can also be used with clearWatch() method to stop watching the location.