Gather all location-related data according to input provided by the user by using the jQuery geocomplete plugin.
Features
- Location/Place auto-suggest.
- It provides all location-related data like latitude, longitude, country, state, city, etc.
- 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>