HTML Geolocation API

    HTML Geolocation API

    In HTML5 W3C introduce a new API to detect the user location; however, it is on the user whether to allow or dismiss this feature. With this API, we can detect the current geographical position of the user. The Geolocation API only works with secure websites such as HTTPS, if your website is hosted on a non-secure origin with HTTP request then this API will not work.

    HTML Geolocation

    This is an HTML API and its code written in JavaScript. So to use this API, we need to write the JavaScript code. The getCurrentPosition() method can return the current position of the user, and this method works more accurately when the device has a GPS.

    Example 

    <!DOCTYPE html>
<html>
<body>

 <p>Click to Get Your Geographical Coordinates</p>

 <button onclick="getCoordinates()">Try It</button>

 <i id="print"></i>

 <script>
   var c = document.getElementById("print");

   function getCoordinates() {
     if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showcoordinates);
         } 
     else { 
        c.innerHTML = "Browser Does Not Support Geographical API";  
         }
     }

    function showcoordinates(position) {
        c.innerHTML = "<br>Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;
       }
   </script>

</body>
</html>

    Geolocation Error Handling and Rejections

    getCurrentPosition() method can accept two parameters. The first parameter is the function for showing coordinates, and the second parameter handle errors. The second parameter is a function that runs if the browser fails to get the current location of the user's. 

    navigator.geolocation.getCurrentPosition(showcoordinates, showError);

function showError(error) 

{
    switch(error.code) {
     case error.PERMISSION_DENIED:
     x.innerHTML = "User denied the request for Geolocation."
    break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
    break;
    case error.TIMEOUT:
    x.innerHTML = "The request to get user location timed out."
    break;
   case error.UNKNOWN_ERROR:
    x.innerHTML = "An unknown error occurred."
   break;
}

    Show the coordinates on a Map

    Once we get the user coordinates using the getCurrentPosition() method we can use the map services provided by Google and Apple and display the coordinates on the map. 

    function showPosition(position) {
  var latlon = position.coords.latitude + "," + position.coords.longitude;

  var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

    getCurrentPosition() Method Return Data

    The getCurrentPosition() method return an object, and using that object we can access the various properties associated with it.

    getCurrentPositon() Property Returns
    cor.latitude Return the latitude coordinate
    cor.longitude Return the longitude coordinate
    cor.accuracy It returns the accuracy of the position
    cor.altitude It returns the altitude level above the sea level.
    cor.altitudeAccuracy It returns the accuracy of the altitude.
    cor.heading It returns the clockwise degree from the north.
    cor.speed It returns the speed in meter/second
    timestamp. It returns the date and time.

    Summary

    • In HTML5, we have an API to get the user's current location.
    • The location can only be accessed if the user allow the permission.
    • The API is written in JavaScript.
    Previous Tutorial Next Tutorial