Autofill Address + Google Maps API Autofill Address + Google Maps API jquery jquery

Autofill Address + Google Maps API


You can use Google Places API to have an autocomplete for address. When address is selected, address_components field contains structured address data (e.g. street, city, country) and could be easily converted into separate fields.

Here is a short working demo:

<!DOCTYPE html><html>    <head>        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>    </head>    <body>        <input type="text" id="address" style="width: 500px;"></input>        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>        <script>            var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});            google.maps.event.addListener(autocomplete, 'place_changed', function() {                var place = autocomplete.getPlace();                console.log(place.address_components);            });        </script>    </body></html>


https://github.com/ubilabs/geocomplete should work for you.You will also be able to show a map, if necessary.

If you use the plugin without showing a map you must display the "powered by Google" logo under the text field.