TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

HTML Geolocation

HTML geolocation with image and examples, html5, forms, input, text, anchor, image, heading, marquee, textarea, paragraph, title, quotes, code etc.

<< Back to HTML

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:

    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>
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:

  var id = navigator.geolocation.watchPosition(success[, error[, options]])

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.

Syntax:

    navigator.geolocation.clearWatch(id);

Browser Support:

APIchrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
Geolocation5.0 - 49.0 (http)
50.0 (https)
9.03.516.05.0
Next TopicHTML Web Storage




Related Links:


Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf