11:I[15965,["/_next/static/chunks/59afeb3bb4503188.js?dpl=dpl_89EDNMAkCDRzvr5qr7nd6aAgBzRS","/_next/static/chunks/1660bcdb10ec0eab.js?dpl=dpl_89EDNMAkCDRzvr5qr7nd6aAgBzRS","/_next/static/chunks/e315b4696491f6f6.js?dpl=dpl_89EDNMAkCDRzvr5qr7nd6aAgBzRS","/_next/static/chunks/feee627b81c09baf.js?dpl=dpl_89EDNMAkCDRzvr5qr7nd6aAgBzRS"],"ItemTemplate"] 12:T4cb,

This plugin generates an autocomplet from an input field, so that you can retrieve an address and its associated geodata from Google and fill it into input fields.

Initialize

Include libraries

<script src="https://maps.googleapis.com/maps/api/js?key=<strong>YOUR_API_KEY</strong>&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" <b>data-geo="street"</b> name="" value="">
<input class="form-control" id="latitude" <b>data-geo="latitude"</b> name="" value="">
<input class="form-control" id="longitude" <b>data-geo="longitude"</b> name="" value="">

Call the plugin

<script>
    $(function() {
        $('.autocomplete').googleGeoAutocomplete({
            OPTIONS
        });
    });
</script>

Google Geocomplete