Maps API v3 Places Autocomplete form fill

by R

HTML

<form action="/" method="post">

  <div>
    <label for="autocomplete">Instant Address Search</label>
    <input id="autocomplete" onfocus="geolocate()" data-drupal-selector="edit-full-address" type="text" name="full_address" value="" size="60" maxlength="128" placeholder="Instant Address Search" class="form-text" autocomplete="off">
  </div>
  <div>
    <label for="edit-address" class="form-required">Address</label>
    <input data-drupal-selector="edit-address" type="text" id="edit-address" name="address" value="" size="60" maxlength="128" placeholder="street number &amp; name" class="form-text required" required="required" aria-required="true">
  </div>
  <div>
    <label for="edit-apt-number">Apt. Number</label>
    <input data-drupal-selector="edit-apt-number" type="text" id="edit-apt-number" name="apt_number" value="" size="60" maxlength="128" class="form-text">
  </div>
  <div>
    <label for="edit-city" class="form-required">City</label>
    <input data-drupal-selector="edit-city" type="text" id="edit-city" name="city" value="" size="60" maxlength="128" class="form-text required" required="required" aria-required="true">
  </div>
  <div>
    <label for="edit-state" class="form-required">State</label>
    <select data-drupal-selector="edit-state" id="edit-state" name="state" size="58" class="form-select required" required="required" aria-required="true" style="display: none;">
      <option value="" selected="selected">- Select -</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="Other">Other</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
      <option value="CT">Connecticut</option>
      <option value="DE">Delaware</option>
      <option value="FL">Florida</option>
      <option value="GA">Georgia</option>
      <option value="HI">Hawaii</option>
      <option value="ID">Idaho</option>
      <option...

JavaScript

var autocomplete,
  fieldsMapper = ['edit-address', 'edit-city', 'edit-state', 'edit-zip-code'];

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to
  // geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('autocomplete')), {
      types: ['geocode'],
      componentRestrictions: {
        country: 'us'
      }
    });

  // 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();

  // Clear fields.
  fieldsMapper.forEach(function(element) {
    document.getElementById(element).value = '';
    document.getElementById(element).disabled = false;
  });

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  var current_street_number = '';
  for (var i = 0; i < place.address_components.length; i++) {
    switch (place.address_components[i].types[0]) {
      case 'street_number':
        current_street_number = place.address_components[i].short_name;
        document.getElementById('edit-address').value = current_street_number;
        break;
      case 'route':
        document.getElementById('edit-address').value = current_street_number + ' ' + place.address_components[i].long_name;
        break;
      case 'locality':
        document.getElementById('edit-city').value = place.address_components[i].long_name;
        break;
      case 'administrative_area_level_1':
        jQuery('#edit-state').val(place.address_components[i].short_name).trigger("chosen:updated");
        break;
      case 'postal_code':
        document.getElementById('edit-zip-code').value = place.address_components[i].long_name;
        break;
    }
  }

}

// Bias the...