/    /  HTML Geolocation

HTML Geolocation

 

Geolocation is one of the HTML5 API which is provided 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(user). These coordinates can be captured by JavaScript and send to the server-side which can show the user current location on the website.

Most of the geolocation services use network routing addresses such as IP address, RFID, WIFI, and MAC addresses or internal GPS devices to identify the user’s location.

 

User privacy:

 

The user’s location is a privacy concern, so geolocation API protects the user’s privacy by taking the user’s permission before getting the location.

 

Geolocation object:

 

The Geolocation API works with navigation.geolocation object. It is read-only property returns a Geolocation object which identifies the user location and can create a customized result based on user location.

 

Syntax:

 

geo=navigator. geolocation;

 

Geolocation Methods:

 

Geolocation API uses three methods of Geolocation interface.

getCurrentPosition() – The visitor’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:

 

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){
               alert("your browser is supporting Geolocation API")
       }
       else
       {
               alert("Sorry! your browser is not supporting")
       }
 }
</script>
</body>
</html>

 

OUTPUT:

 

HTML Geolocation

 

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 the “Position Error” object as input.

options: It defines different options for getting the 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>

 

OUTPUT:

 

HTML Geolocation

 

  • First checking the browser support.
  • Getting current position with getCurrentPosition().
  • Getting latitude or longitude values with showPosition() method which is call back method of getCurrentPosition().

 

Handling Errors and Rejections:

 

The parameter of the getCurrentPosition() method is used to handle errors. It provides a function to run if it fails to get the user’s location.

  • Unknown random error Occurred
  • If the user has denied for sharing location
  • Location information is not available
  • Request for location is timed-out.

 

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, showError)
         }
        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;
   }

   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;
  }
    }
</script>
</body>
</html>

 

OUTPUT:

 

HTML Geolocation

 

Displaying location on Google Map:

 

The results in a map, you need access to a map service, like Google Maps.

 

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>

 

 

OUTPUT:

 

HTML Geolocation

 

Location properties:

 

coords.latitude – User location as a decimal number.

coords.longitude – User location as a decimal number.

coords.altitude – Meters above the sea level.

coords.accuracy – Accuracy of the user’s position.

coords.altitudeAccuracy – Accuracy of user location.

coords.heading – Headings as degree clockwise from North.

coords.speed – Speed in meter per seconds.

timestamp – Data or time of response.

 

Watching the current location:

 

If we want to know the user location while he or she is moving and want accurate location at every changed position, then it can be achieved by using the 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);