Programming

Places autocomplete using google places API

Using javascript

Working on user input field requires many kinds of form fields and to make it more easy for the user, we need to add a field that fills up automatically like giving a birth date automatically fills up the age field or updating a gender field can automatically give you the option for
By only updating a zip code field, the address field will be updated automatically.

To use the Maps JavaScript API First, you need to add “Google API Key. The API key is a unique identifier, It is used to authenticate requests associated with your project for usage and billing purposes.

Follow these steps to get an API key

How to Get the API key

To get an API key:

  1. Go to the Google Cloud Platform Console.
  2. Click on the project and drop-down then select or create a project for which you want to add an API key.
  3. Click on the menu button  and then select APIs & Services > Credentials.
  4. On the Credentials, click Create credentials > API key.
    The API key created dialog displays your recently or newly created API key.
  5. Click Close.
    The new API key is listed on the Credentials page under API keys.
Places autocomplete using google places api
Enable both of them from Places library.
image credit-google

Code

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkngrrDMNHIyTeOVDRy6D_zKFfgt6kZ8w&libraries=places">  //use Api key here
</script>
<script type="text/javascript">

$('.zip input').attr("placeholder", "");
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.querySelector('.zip input'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();

//blank all fields for new zip code entry
$('.addOne input').val(" ");
              $('.city input').val(" ");
              $('.state input').val(" ");
              $('.country input').val(" ");
              $('.addTwo input').val(" ");

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.

//binding data from address component in fields 
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];

if (addressType == "sublocality_level_2" ) {
		$('.addOne input').val(place.address_components[i]['long_name']);
      }
      else if(addressType == "locality"){
         $('.city input').val(place.address_components[i]['long_name']);
      }

    else if(addressType ==  "administrative_area_level_1"){
$('.state input').val(place.address_components[i]['long_name']);
    }
    else if(addressType ==  "country"){
      $('.country input').val(place.address_components[i]['long_name']);
    }
    else if(addressType ==  "route"){
      $('.addTwo input').val(place.address_components[i]['long_name']);
    }
       else if(addressType ==  "postal_code"){
      $('.zip input').val(place.address_components[i]['long_name']);
    }
    }
           });
        });
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *