PHP code to autocomplete places on textbox

Hello, In this post we will learn how to create autocomplete textbox field with places (Country, City, State) in php.

For this purpose we will use google API and autocomplete script. Code is below…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

Related posts

How to Get Geolocation from an IP Address using PHP

Payout API Integration in PHP: A Complete Guide

OpenStreetMap with Multiple Markers and Info Windows Popups Using JavaScript