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.

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