Gather all location related data according to input provided by the user, by using jQuery geocomplete plugin. Geocomplete is a Google map API that will auto complete address. Let's see step by step how it will work.

Demo | Download

Step1: Add jQuery library and google map API script

<script src="./js/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="./js/jquery.geocomplete.min.js"></script>

Step2: Trigger Request

<script>
$(function () { 
 $("#location").geocomplete({
   details: ".geo-details",
   detailsAttribute: "data-geo"
 });
});
</script>

Step3: Add input field to enter address

<div id="container">
  <p>
    <label for="location">Location: </label>
    <input type="text" name="location" id="location" class="location">
  </p>
  <div class="geo-details">
    <table align="center" class="table">
      <tr>
        <td align="right">Country</td>
        <td><input type="text" data-geo="country" value="" id="setting_country" name="setting_country" class="location"></td>
      </tr>
      <tr>
        <td align="right">Country code</td>
        <td><input type="text" data-geo="country_short" value="" id="setting_country_short" name="setting_country_short" class="location"></td>
      </tr>
      <tr>
        <td align="right">State</td>
        <td><input type="text" data-geo="administrative_area_level_1" value="" id="setting_state" name="setting_state" class="location"></td>
      </tr>
      <tr>
        <td align="right">State code</td>
        <td><input type="text" data-geo="administrative_area_level_1_short" value="" id="setting_state_short" name="setting_state_short" class="location"></td>
      </tr>
      <tr>
        <td align="right">City</td>
        <td><input type="text" data-geo="administrative_area_level_2" value="" id="setting_city" name="setting_city" class="location"></td>
      </tr>
      <tr>
        <td align="right">Latitude</td>
        <td><input type="text" data-geo="lat" value="" id="setting_latitude" name="setting_latitude" class="location"></td>
      </tr>
      <tr>
        <td align="right">Longitude</td>
        <td><input type="text" data-geo="lng" value="" id="setting_longitude" name="setting_longitude" class="location"></td>
      </tr>
    </table>
  </div>
  <span class="htlpText">To view demo please enter some address text in Location input field.</span> 
</div>

If you want to add get specific details like City, State or Country name of entered address, you need to change like...

<script>
$(function () { 
 $("#location").geocomplete({
   details: ".geo-details",
   detailsAttribute: "data-geo"
 });
        
        $("#location")
  .geocomplete()
  .bind("geocode:result", function (event, result) {      
                    //console.log(result);
                    var city = result.name;
                    var state = result.address_components[2].long_name;
                    var country = result.address_components[3].long_name;
 });

});
</script>