Access the current location of user

Location refers to the latitude and logitude of particular place. Accessing the geographical position of any place is very easy. Google map provides the latitude and logitude of wherever place you want. But how do we access while developing web apps? This is also as easy as google map.

We will be using HTML geolocation api to get the geographical position of a user. Since this is comprise of privacy, geolocation cannot be acquired unless user give permission to location access.

Let’s start by creating a form. For the quick start I used the help of bootstrap form,so don’t forget to give stylesheet and js url of bootstrap.

<p id="distance-permission"></p>
<form action="{{ url('/location-submit') }}" method="GET" id="location-form">
   @csrf
   <input type="hidden" id="latitude" value="" name="latitude">
   <input type="hidden" id="longitude" value="" name="longitude">
   <div class="mb-3">
      <label for="name" class="form-label">Name</label>
      <input type="text" class="form-control" id="name">
   </div>
   <div class="mb-3">
      <label for="distance" class="form-label">Distance</label>
      <input type="text" class="form-control" id="distance">
   </div>
   <button id="distance-submit" class="btn btn-primary">Submit</button>
</form>

Here I wrote name and distance field just in case you need any extra field. latitude and logitude field are not necessary to show because it just carries the latitude and logitude respectively when user approves the access.Below is the main part of this tutorial.

<script>
   const nearmeid = document.getElementById("distance-submit");
      nearmeid.addEventListener("click", function(event) {
          event.preventDefault(); 
          if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(showPosition, error);
          } else {
              x.innerHTML = "Geolocation is not supported by this browser.";
          }

          function showPosition(position) {
              document.getElementById("latitude").setAttribute("value", 
              position.coords.latitude);
              document.getElementById("longitude").setAttribute("value", 
              position.coords.longitude);
              document.getElementById('location-form').submit();
          }

          function error() {
              var x = document.getElementById("distance-permission");
              x.innerHTML = "Error:location permission is denied";
          }
      })
</script>

when the form is submitted the pop up arises in the top left corner of the browser.If user allow the permission then latitude and longitude is assigned to the hidden field and form is submitted.If not allowed then error message arises.

permission

Since I am using laravel I will show the result from diedump of form request.

dd-img

Handling errors and rejections

function error(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;
  }
}
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments