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


  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


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

<script src="jquery.min.js"></script>
<script src=""></script>
<script src="jquery.geocomplete.min.js"></script>

Trigger Request


jQuery to get and populate data in data attribute.

$(function () { 
          details: ".geo-details",
          detailsAttribute: "data-geo"

jQuery to get and populate data in particular HTML element.

$(function () { 
                .bind("geocode:result", function (event, result) {                                              

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">