Google Autocomplete Address is very useful service from google. If you want to add google autocomplete address in your input field using. Here is a javascript code.
Note: Now it is mendatory to add API KEY in google script.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry,places"> </script> <script> google.maps.event.addDomListener(window, 'load', function () { var options = { componentRestrictions: {country: 'uk'} }; var places = new google.maps.places.Autocomplete(document.getElementById('address'),options); }); </script> <div class="container"> <form action="" method="post"> <label>Search Address:</label> <input type="text" name="uk_address" id="address"> </form> </div> |
At first I loaded map script from google and then in Dom Listener event, I created options variable. In options variable I added only componentRestrictions property and pass UK. (Right now, you can pass only one country in componentRestrictions for more details Visit Official Forum).
After that I created places variable and create new object and bind it with address id (id of an input field) and passed options variable in it. that’s it.