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 the 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.
liveLive Demo downDownload Script

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

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

Example:

jQuery to get and populate data in a 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>
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram