HTML

What is GeoLocation?

Back
Next

Geolocation is a browser-based HTML5 API that is used to obtain the device's latitude and longitude and identifies the location of that device. A lot of web applications out there are required to fetch device locations like the restaurant, hospitals, and other businesses.

After completing this tutorial you will learn about HTML Geo location methods and their properties.



Geolocation Methods

getCurrentPosition(): This method returns the latitude and longitude of the device's location.

navigator.geolocation.getCurrentPosition((position) => { doYourWork(position.coords.latitude, position.coords.longitude);

watchPosition(): It keeps watching device location and return the latest location of the device.

const watchID = navigator.geolocation.watchPosition((position) => { doYourWork(position.coords.latitude, position.coords.longitude); });

clearWatch(): This method is used to stop watching the position change of the device. It takes a watch Id as a parameter.

navigator.geolocation.clearWatch(watchID);

Geolocation Properties


Latitude: It return the latitude of the device as a decimal number.

Longitude: It return the longitude of the device as a decimal number.

Accuracy: Accuracy property returns the accuracy level of the latitude and longitude coordinates in meters.

Altitude: Altitude means the height of the position in meters above sea level. We can get altitude by using this property.

Altitude Accuracy: Altitude Accuracy property returns the accuracy level of the Altitude.

Heading: This property returns the direction of the travel of the device in degree if it is available. Values lives between 0 to 360 degree.

Speed: It returns the horizontal speed of the device in meters per second.


Error Description


ERROR CODE Description
GeolocationPositionError.TIMEOUT If the request time is exceeded to fetch the geolocation data, API returns this error.
GeolocationPositionError.PERMISSION_DENIED If the user denied permission or devices don't have permission to get geolocation data.
GeolocationPositionError.POSITION_UNAVAILABLE Position is not available

Example:

<!DOCTYPE html>
<html>
 
<head>
  <title>Example of HTML5 geolocation</title>
  <style>
    .maindiv {
      font-size: 40px;
      font-weight: bold;
      color: #009900;
      margin-left: 20px;
    }
 
    .buttoncss {
      margin-left: 150px;
    }
 
    p {
      font-size: 20px;
      margin-left: 20px;
    }
  </style>
</head>
 
<body>
  <div class="maindiv">Example of geolocation</div>
 
   
 
<p>Error Message</p>
 
 
 
  <button class="buttoncss btn btn-dark" onclick="getDeviceLocation()">
    Get Location
  </button>
  <p id="mydemo"></p>
 
 
 
  <script>
    var myDemoPara = document.getElementById("mydemo");
    function getDeviceLocation() {
      navigator.geolocation.getCurrentPosition(doSomething, errorHandler);
    }
    function doSomething(position) {
      myDemoPara.innerHTML =
        "Latitude: " +
        position.coords.latitude +
        "<br>Longitude: " +
        position.coords.longitude;
    }
 
    function errorHandler(error) {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          myDemoPara.innerHTML =
            "The application doesn't have the" +
            "permission to make use of location services";
          break;
        case error.POSITION_UNAVAILABLE:
          myDemoPara.innerHTML = "The location of the device is uncertain";
          break;
        case error.TIMEOUT:
          myDemoPara.innerHTML = "The request to get user location timed out";
          break;
        
      }
    }
  </script>
</body>
 
</html>
Example of HTML5 geolocation
Example of geolocation

Error Message

Back
Next