NEW

6/recent/ticker-posts

Header Ads Widget

HTML5 Geolocation

Sunday, June 11, 2023

 

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:

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

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

  1.  <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Geolocation API</title>  
  5. </head>  
  6. <body>  
  7.   <h1>Find your Current location</h1>  
  8. <button onclick="getlocation()">Click me</button>  
  9. <div id="location"></div>  
  10. <script>  
  11.     var x= document.getElementById("location");  
  12.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
  13.     function getlocation() {  
  14.         if(navigator.geolocation){  
  15.             alert("your browser is supporting Geolocation API")  
  16.         }  
  17.         else  
  18.         {  
  19.             alert("Sorry! your browser is not supporting")  
  20.         }  
  21.     }  
  22. </script>  
  23. </body>  
  24. </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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Geolocation API</title>  
  5. </head>  
  6. <body>  
  7.   <h1>Find your Current location</h1>  
  8. <button onclick="getlocation()">Click me</button>  
  9. <div id="location"></div>  
  10. <script>  
  11.     var x= document.getElementById("location");  
  12.     function getlocation() {  
  13.         if(navigator.geolocation){  
  14.             navigator.geolocation.getCurrentPosition(showPosition)  
  15.           }  
  16.         else  
  17.         {  
  18.              alert("Sorry! your browser is not supporting")  
  19.          } }  
  20.        
  21.      function showPosition(position){  
  22.        var x = "Your current location is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " +    position.coords.longitude + ")";  
  23.                 document.getElementById("location").innerHTML = x;  
  24.      }  
  25. </script>  
  26. </body>  
  27. </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

  1. function showError(error) {  
  2.         switch(error.code){  
  3.             case error.PERMISSION_DENIED:  
  4.             alert("User denied the request for Geolocation API.");  
  5.             break;  
  6.         case error.POSITION_UNAVAILABLE:  
  7.             alert("USer location information is unavailable.");  
  8.             break;  
  9.         case error.TIMEOUT:  
  10.             alert("The request to get user location timed out.");  
  11.             break;  
  12.         case error.UNKNOWN_ERROR:  
  13.             alert("An unknown error occurred.");  
  14.             break;  
  15.     }  
  16.         }  

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

  1. <!DOCTYPE html>   
  2. <html>   
  3.     <head>   
  4.       <title>Geolocation API</title>   
  5.      </head>   
  6.     <body>   
  7.        <h2>Find Your Location in below Map</h2>   
  8.         <button onclick="getlocation();"> Show Position</button>   
  9.         <div id="demo" style="width: 600px; height: 400px; margin-left: 200px;"></div>   
  10.          
  11.         <script src="https://maps.google.com/maps/api/js?sensor=false"> </script>   
  12.           
  13.         <script type="text/javascript">   
  14.         function getlocation(){   
  15.             if(navigator.geolocation){   
  16.                 navigator.geolocation.getCurrentPosition(showPos, showErr);   
  17.             }  
  18.             else{  
  19.                 alert("Sorry! your Browser does not support Geolocation API")  
  20.             }  
  21.         }   
  22.         //Showing Current Poistion on Google Map  
  23.         function showPos(position){   
  24.             latt = position.coords.latitude;   
  25.             long = position.coords.longitude;   
  26.             var lattlong = new google.maps.LatLng(latt, long);   
  27.             var myOptions = {   
  28.                 center: lattlong,   
  29.                 zoom: 15,   
  30.                 mapTypeControl: true,   
  31.                 navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL}   
  32.             }   
  33.             var maps = new google.maps.Map(document.getElementById("demo"), myOptions);   
  34.             var markers =   
  35.             new google.maps.Marker({position:lattlong, map:maps, title:"You are here!"});   
  36.         }   
  37.   
  38.         //Handling Error and Rejection  
  39.              function showErr(error) {  
  40.               switch(error.code){  
  41.               case error.PERMISSION_DENIED:  
  42.              alert("User denied the request for Geolocation API.");  
  43.               break;  
  44.              case error.POSITION_UNAVAILABLE:  
  45.              alert("USer location information is unavailable.");  
  46.             break;  
  47.             case error.TIMEOUT:  
  48.             alert("The request to get user location timed out.");  
  49.             break;  
  50.            case error.UNKNOWN_ERROR:  
  51.             alert("An unknown error occurred.");  
  52.             break;  
  53.            }  
  54.         }        </script>   
  55.     </body>   
  56. </html>       

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.

PropertiesDescription
coords.latitudeIt returns latitude of user location as a decimal number.
coords.longitudeIt returns longitude of user location as a decimal number.
coords.altitudeIt returns altitude in meters above the sea level (Only if available).
coords.accuracyIt returns the accuracy of the user's position.
coords.altitudeAccuracyIt returns the altitude accuracy of user location. (If available)
coords.headingIt returns headings as degree clockwise from North. (If available)
coords.speedIt returns the speed in meter per seconds. (If available).
timestampIt 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:

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

  1. navigator.geolocation.clearWatch(id);  


Tags:

Post a Comment

0 Comments

Post a Comment

Recents Post

Exploring Paidwork - Your Gateway to Earning Online

Exploring Paidwork - Your Gateway to Earning Online

Slogan Technologies Monday, May 13, 2024

In today's digital age, the possibilities for earning money online are vast and …