Autocomplete is a feature of the Places library in the Google Maps JavaScript API. You can use autocomplete to give your applications the type-ahead-search behavior of the Google Maps search field. When a user starts typing an address, autocomplete will fill in the rest.
In order to use autocomplete, you will need to load the Google Places library using the libraries
parameter in the bootstrap URL for the Google Maps JavaScript API.
Autocomplete for Addresses and Search
Step 1
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
Step 2
<script type="text/javascript"> function initialize() { var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input); google.maps.event.addListener(autocomplete, 'place_changed', function () { var place = autocomplete.getPlace(); document.getElementById('place_id').value = place.place_id; document.getElementById('place_location').value = place.geometry.location; document.getElementById('name').value = place.name; document.getElementById('lname').value = place.long_name; document.getElementById('address').value = place.formatted_address; document.getElementById('street_number').value = place.street_number; document.getElementById('postcode').value = place.postal_code; document.getElementById('phone').value = place.formatted_phone_number; document.getElementById('website').value = place.website; document.getElementById('rating').value = place.rating; document.getElementById('Lat').value = place.geometry.location.lat(); document.getElementById('Lng').value = place.geometry.location.lng(); }); } google.maps.event.addDomListener(window, 'load', initialize); </script>
Step 3
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" /> <br> place_id <input type="text" id="place_id" name="place_id" /> <br> place_location <input type="text" id="place_location" name="place_location" /> <br> name <input type="text" id="name" name="name" /> <br> lname <input type="text" id="lname" name="lname" /> <br> address <input type="text" id="address" name="address" /><br> street number <input type="text" id="street_number" name="street_number" /><br> postcode <input type="text" id="postcode" name="postcode" /><br> phone <input type="text" id="phone" name="phone" /> website <input type="text" id="website" name="website" /><br> rating <input type="text" id="rating" name="rating" /><br> <input type="text" id="Lat" name="Lat" /> <input type="text" id="Lng" name="Lng" />
Output: