Add Google Places Address Suggestion in Your Address Field

To avoid misspelled user typing of address for searching places or anything by Google map, you can place only address suggestion dropdown provided by Google places API. It’s so easy to integrate.

Just add the following Javascript code before </head> tag.

<script src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

Now let’s assume your input field/ address field code in your form is-

<input type="text" class="form-control" id="locationInput" placeholder="write your address">

Now put the following javascript code after adding the google api javascript file source.

<script>
  (function(){
    var options = {
                    types:  ['geocode']
                  };

    var input1 = document.getElementById('locationInput');
    var autocomplete = new google.maps.places.Autocomplete(input1,options);
  })();
</script>

Now when you will try to type something on your address field then automatically google will show possible address suggestions for you.