bind google places autocomplete on textbox without instantiating a google map

Guys you can use following code. 

 <!DOCTYPE html>
    <html>
      <head>
        <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
        <script>
            var autocomplete;
            function initialize() {
              autocomplete = new google.maps.places.Autocomplete(
                  /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
                  { types: ['geocode'] });
              google.maps.event.addListener(autocomplete, 'place_changed', function() {
              });
            }
        </script>
      </head>
      <body onload="initialize()">
        <div id="locationField">
          <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
        </div>
      </body>
    </html>

Edit: Google Maps now require an API key for this to work.


This is a pretty old thread but google now requires an API for all of their maps based services and I felt that the code example could be simplified a little.

Inside head element (update code with your input element id attribute):

<script type="text/javascript">
  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('YOUR_INPUT_ELEMENT_ID')),
        {types: ['geocode']});

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

  }
    </script>

Inside your page confirm you have a text input with an ID attribute that matches the above script:

<input type="text" id="YOUR_INPUT_ELEMENT_ID" />

Just before the close of your body tag add this script (update with your own API key):

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

Other notes:

  • This is a slightly modified version of the original help/example article found here
  • You need an active API key for Google Places API Web Service and to enable Google Maps Javascript API from Google Developer Console

Tags:

Javascript

Jquery

Google Maps

Google Places

Recent Posts