Implementing Google Places Autocomplete v3

Compiled ES6 Google Places Autocomplete

by chromatic_larry

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places"></script>
<div class="form-element">
  <label>Address</label>
  <input type="text" id="street-address-field">
</div>
<div class="form-element">
  <label>City</label>
  <input type="text" id="city-address-field">
</div>
<div class="form-element">
  <label>State</label>
  <input type="text" id="state-address-field">
</div>
<div class="form-element">
  <label>Postal Code</label>
  <input type="text" id="postal-code-address-field">
</div>

CSS

.form-element {
  padding: 10px 0px;
}

input {
  width: 300px;
}

JavaScript

"use strict";

function initAutocomplete() {
  var _this = this;
  var googleComponents = [{
    googleComponent: "sublocality_level_1",
    id: "city-address-field"
  }, {
    googleComponent: "locality",
    id: "city-address-field"
  }, {
    googleComponent: "administrative_area_level_1",
    id: "state-address-field"
  }, {
    googleComponent: "postal_code",
    id: "postal-code-address-field"
  }];

  var autocompleteFormField = document.getElementById("street-address-field");
  var autocomplete = new google.maps.places.Autocomplete((autocompleteFormField), {
    types: ['address'],
  });

  google.maps.event.addListener(autocomplete, "place_changed", function() {
    var place = autocomplete.getPlace();
    autocompleteFormField.value = place.name;

    var _loop = function _loop(component) {
      var addressComponents = place.address_components;
      addressComponents.forEach(function(addressComponent) {
        return populateFormElements(addressComponent, googleComponents[component]);
      });
    };

    for (var component in googleComponents) {
      _loop(component);
    }
  });
}

function populateFormElements(addressComponent, formMap) {
  var addressType = addressComponent.types[0];
  if (formMap.googleComponent === addressType) {
    var formValue = addressComponent.long_name;
    document.getElementById(formMap.id).value = formValue;
  }
}

initAutocomplete();