bind google places autocomplete on textbox without instantiating a google map

Pradeep Maurya

9 years ago

Hello, In this post we will learn how to bind google places into textbox without instantiating google map. lets see how to do..


<!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>

<!DOCTYPE html>

<html>

<head>

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>

</div>

</body>

</html>

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co