Get Full Address Data With Google Autocomplete

<input class="form-control autocomplete">
formatted_address <input class="form-control" id="formatted_address" data-geo="formatted_address" value="">
route <input class="form-control" id="route" data-geo="route" value="">
street_number <input class="form-control" id="street_number" data-geo="street_number" value="">
street <input class="form-control" id="street" data-geo="street" value="">
locality <input class="form-control" id="locality" data-geo="locality" value="">
administrative_area_level_2 <input class="form-control" id="administrative_area_level_2" data-geo="administrative_area_level_2" value="">
administrative_area_level_1 <input class="form-control" id="administrative_area_level_1" data-geo="administrative_area_level_1" value="">
postal_code <input class="form-control" id="postal_code" data-geo="postal_code" value="">
latitude <input class="form-control" id="latitude" data-geo="latitude" value="">
longitude <input class="form-control" id="longitude" data-geo="longitude" value="">
country <input class="form-control" id="country" data-geo="country" value="">
Show Large map
url <div data-geo="url" style="display: none;"><a target="_blank" href="">Show Large map</a></div>

Initialize

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>

Options

Restrict results only from a country
country: null
country: ['DE']
https://developers.google.com/maps/documentation/javascript/places-autocomplete
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']