jQuery Geocomplete Plugin to Autocomplete Location/ Places and Gather All Location Related Data

Gather all location related data according to input provided by the user, by using jQuery geocomplete plugin.

Features

  1. Location/Place auto-suggest.
  2. It provides all location related data like latitude, longitude, country, state, city, etc.
  3. It can show an interactive Google map.a

Requirements

jQuery, Google Maps API with the Places Library required before loading geocomplete plugin.

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

Trigger Request

Example:

jQuery to get and populate data in data attribute.

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

jQuery to get and populate data in particular HTML element.

<script>
$(function () {
$("#location")
.geocomplete()
.bind("geocode:result", function (event, result) {
$("#latitude").val(result.geometry.location.lat());
$("#longitude").val(result.geometry.location.lng());
//console.log(result);
});
});
</script>

HTML Code to populate Form Data

<div class="geo-details" style="display:none">
  <input type="hidden" data-geo="country" value="" id="setting_country" name="setting_country">
  <input type="hidden" data-geo="country_short" value="" id="setting_country_short" name="setting_country_short">
  <input type="hidden" data-geo="administrative_area_level_1" value="" id="setting_state" name="setting_state">
  <input type="hidden" data-geo="administrative_area_level_1_short" value="" id="setting_state_short" name="setting_state_short">
  <input type="hidden" data-geo="administrative_area_level_2" value="" id="setting_city" name="setting_city">
  <input type="hidden" data-geo="lat" value="" id="setting_latitude" name="setting_latitude">
  <input type="hidden" data-geo="lng" value="" id="setting_longitude" name="setting_longitude">
</div>