<input class="form-control autocomplete">
<input class="form-control" id="formatted_address" data-geo="formatted_address" value="">
<input class="form-control" id="route" data-geo="route" value="">
<input class="form-control" id="street_number" data-geo="street_number" value="">
<input class="form-control" id="street" data-geo="street" value="">
<input class="form-control" id="locality" data-geo="locality" value="">
<input class="form-control" id="administrative_area_level_2" data-geo="administrative_area_level_2" value="">
<input class="form-control" id="administrative_area_level_1" data-geo="administrative_area_level_1" value="">
<input class="form-control" id="postal_code" data-geo="postal_code" value="">
<input class="form-control" id="latitude" data-geo="latitude" value="">
<input class="form-control" id="longitude" data-geo="longitude" value="">
<input class="form-control" id="country" data-geo="country" value="">
<div data-geo="url" style="display: none;"><a target="_blank" href="">Show Large map</a></div>
Include libraries
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> <script src="jquery.js"></script> <script src="google-geocomplete.js"></script>
Create your Autocomplete Input field
<input class="form-control" id="formatted_address" data-geo="formatted_address" value="">
Setup your fields, you can use type="hidden" too
<input class="form-control" id="street" data-geo="street" name="" value=""> <input class="form-control" id="latitude" data-geo="latitude" name="" value=""> <input class="form-control" id="longitude" data-geo="longitude" name="" value="">
Call the plugin
<script> $(function() { $('.autocomplete').googleGeoAutocomplete({ OPTIONS }); }); </script>
country: nullhttps://developers.google.com/maps/documentation/javascript/places-autocomplete
country: ['DE']
componentRestrictions: {}Specify the container where the elements are to be filled
details: '.results'
<div class="results"> <input class="form-control" id="street" data-geo="street" value=""> <input class="form-control" id="latitude" data-geo="latitude" value=""> <input class="form-control" id="longitude" data-geo="longitude" value=""> </div>https://developers.google.com/places/supported_types
types: ['geocode']