Google Autocomplete api

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&amp;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:

geo

Author:

Since March 2011, have 8+ years of professional experience on software development, currently working as Senior Software Engineer at s3 Innovate Pte Ltd.

Leave a Reply

Your email address will not be published.