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.


  1. Location/Place auto-suggest.
  2. Provides all location related data like latitude, longitude, country, state, city etc.
  3. Able to show an interactive Google map.


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


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

Subscribe Updates via Email

Join 49,000+ W3schools lovers and get all the latest tutorials, programs, algorithms in your inbox.