HTML Geolocation

HTMLWeb DevelopmentFront End Technology

The HTML Geolocation is used to get the real time geographical position of a user, only if they allow it. It can be used for a variety of reasons. It uses JavaScript to get the latitude and longitude.

NOTE − Before Google Chrome 50, geolocation requests could be approved but as of Chrome 50 only requests via HTTPS are approved and requests via HTTP are ignored.

Syntax

Following is the syntax −

navigator.geolocation.getCurrentPosition()

Here, object returned by getCurrentPosition() can have the following properties −

Property
Return Value
coords.latitude
Geographical latitude as a decimal number
coords.longitude
Geographical longitude as a decimal number
coords.accuracy
Accuracy of position
coords.altitude
Altitude in meters above the mean sea level
coords.altitudeAccuracy
Altitude accuracy of position
coords.heading
Heading as degrees clockwise from North
coords.speed
Speed in meters per second
imestamp
The date/time of the response

Let’s see an example of how HTML geolocation provides error handling −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-Geolocation</legend>
<input type="button" value="Update Location" onclick="updateLocation()">
<input type="button" value="Search" onclick="searchLoc()">
<div id="divDisplay">Current Location:</div>
<div>
<span id="latitude">Latitude: 42.9177901</span>
<span id="longitude">Longitude: -75.8114698</span>
</div>
<script>
   var latObj = document.getElementById("latitude");
   var longObj = document.getElementById("longitude");
   var divDisplay = document.getElementById("divDisplay");
   function searchLoc(){
      var lat = latObj.textContent.split(": ")[1];
      var long = longObj.textContent.split(": ")[1];
      var url = "https://www.google.com/maps/@"+lat+","+long+",8.58z";
      browseWindow = window.open(url, "browseWindow", "width=400, height=200");
   }
   function updateLocation(){
      browseWindow.close();
      var user = navigator.geolocation;
      if (user)
         user.getCurrentPosition(updatePosition, errorHandler);
      else
         divDisplay.textContent = "Geolocation is not supported in this browser";
   }
   function updatePosition(position) {
      divDisplay.innerHTML = 'Location Updated<br>Current Location:';
      latObj.textContent = 'Latitude: '+position.coords.latitude;
      longObj.textContent = 'Longitude: '+position.coords.longitude;
   }
   function errorHandler(error) {
      switch(error.code) {
         case error.PERMISSION_DENIED:
            divDisplay.textContent = "You denied the request to get Geolocation"
            break;
         case error.POSITION_UNAVAILABLE:
            divDisplay.textContent = "Your location information is unavailable"
            break;
         case error.TIMEOUT:
            divDisplay.textContent = "The request to get your location timed out"
            break;
         case error.UNKNOWN_ERROR:
            divDisplay.textContent = "Unknown error occurred"
            break;
      }
   }
</script>
</body>
</html>

1) Before clicking any button −

2) After clicking ‘Search’ button −

3) After clicking ‘Update Location’ button −

4) After clicking ‘Search’ button −

5) After clicking ‘Update Location’ button and user denies location access permission −

raja
Published on 19-Sep-2019 12:11:21
Advertisements