Gather all location-related data according to input provided by the user by using the 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.


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 the data attribute.

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


jQuery to get and populate data in a particular HTML element.

    $(function() {
        $("#location").geocomplete().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">

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram