Using geolocation and Google Maps API to get detailed location information!

  • 06-07-2018
  • programming
Thumb

Share:

https://techconductor.com/blogs/programming/using_geolocation_and_google_maps_api_to_get-detailed_location_information.php

Copy

HTML Geolocation API provides us the Latitude and Longitude information of the user or device. Now using that information we will see how to get detailed address information using Google Maps API.

Most of the steps and codes are similar to this post. The code used on the post holds the Latitude information in the variable temp_lat and Longitude information in the variable temp_lng.

As now we have both Latitude and Longitude information we will use Google Maps API to gather more information about the place. Google Maps API lets us use this feature without any API key also they have some limits to API calls.

We will make API requests to the url below:

http://maps.googleapis. com/maps/api/ geocode/json?latlng =x,y&sensor=true

We have to replace the x and y value with Latitude and Longutide values.

Now we can use Ajax to make the request along with Latitude and Longutide information concatenated. And then we will extract the specific information from the Google Maps API JSON response.

Lets make a quick demo and see how everything works:

HTML

<!-- Demo -->
<div class="shadowDepthNav p-3 text-center">
    <button id="loc_btn" name="loc_btn" onclick="getLocation()" class="btn btn-info mb-2">Auto Detect</button><br><br>

    <p id="result"></p>
    <p id="loc_lat"></p>
    <p id="loc_lng"></p>
</div>

Javascript

<script type="text/javascript">
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    temp_lat = 0.0; //set default lat value
    temp_lng = 0.0; //set default lng value
  }
}

function showPosition(position) {
  temp_lat = position.coords.latitude;
  temp_lng = position.coords.longitude;
  $("#loc_lat").html('<small><b>Lat: </b> '+temp_lat+'</small>');
  $("#loc_lng").html('<small><b>Lng: </b> '+temp_lng+'</small>');
  $.ajax({
    type        : 'GET', 
    url         : 'https://maps.googleapis.com/maps/api/geocode/json?latlng='+temp_lat+','+temp_lng+'&sensor=true',
    dataType    : 'json',
    encode      : true
  })
  .done(function(data) {

    if(data.status === "OK"){
      var addr_array_length = data.results[0].address_components.length;

      $("#result").html('<b>Country: </b> '+data.results[0].address_components[addr_array_length - 2].long_name+
                        '<br><b>State: </b> '+data.results[0].address_components[addr_array_length - 3].long_name+
                        '<br><b>District: </b> '+data.results[0].address_components[addr_array_length - 4].long_name+
                        '<br><b>City: </b> '+data.results[0].address_components[addr_array_length - 5].long_name+
                        '<br><b>Post: </b> '+data.results[0].address_components[addr_array_length - 1].long_name+
                        '<br><b>Locality: </b> '+data.results[0].address_components[addr_array_length - 6].long_name+'<br>');
    }else{
      console.log('error Occured!');
    }
  });
}
</script>