Autocomplete with Google Maps API

3:41 AM



In case you are building a Web Application which needs a simple feature like selecting address from Google Map location suggestion then below solution can be used. It is a very simple solution where input fields of the HTML are binded with Google Maps Web service. 



Demo : Link

Below is the code: 

<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete Address Form</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>
    function initialize()
    {
     var first_input = document.getElementById('firstTextField');
     var second_input = document.getElementById('secondTextField');
 var first_autocomplete = new google.maps.places.Autocomplete(first_input);
 var second_autocomplete = new google.maps.places.Autocomplete(second_input);
    }
   
   google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <body> 

     <h2>Test of Populating Text Boxes</h2><br/><br/>
     <i>Starting Point  : </i><input id="firstTextField" type="text" size="50">  &emsp;
     <i>Destination Point : </i> <input id="secondTextField" type="text" size="50">

    </body>
   </html>

Share This Story

Tags: ,

A stereotypical person like everyone. Programmer by profession.

You Might Also Like

0 comments

Popular Posts

Like us on Facebook

Flickr Images