Google Places Autocomplete

Make an autocomplete address field using Google Place Autocomplete api

by ian_smithz

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.6.5/jquery.geocomplete.js"></script>
<div class="card">
  <h3>
Full Address
</h3>
  <label for="fullAddress">Please enter an address:</label>
  <input id="fullAddress" type="text" size="50" autocomplete="off">
</div>


<div class="card">
  <h3>
Zip code only
</h3>
  <em class="tight">alternative to current approach in checkout</em>
  <label for="postalCode">Please enter your postal code:</label>
  <input id="postalCode" type="text" size="50" autocomplete="off">
</div>

<hr/>

<div class="card">
  <h3>
Mixed approach
</h3>
  <label for="autocomplete">Please enter your address:</label>
  <input id="autocomplete" type="text" autocomplete="off" size="50" />
  <div class="panel">
    <form id="address">
      <label>Address</label>
      <input name="name" type="text" value="" autocomplete="off">
      <label>City</label>
      <input name="locality" type="text" value="" autocomplete="off">
      <label>State</label>
      <input name="administrative_area_level_1" type="text" value="" autocomplete="off">
      <label>Postal Code</label>
      <input name="postal_code" type="text" value="" autocomplete="off">

    </form>
    <em>Please confirm the address</em>
  </div>
</div>

CSS

* {
  font-family: sans-serif;
  font-size: 14px;
}

.card {
  margin-bottom: 45px;
}

.card label {
  display: block;
}

.panel {
  display: none;
  margin: 15px 0;
}

.card input {
  padding: 5px;
}

.tight {
  margin-top: -10px;
  display: inherit;
  margin-bottom: 15px;
}

JavaScript

//full
var address = document.getElementById('fullAddress');
var options = {
  componentRestrictions: {
    country: 'us'
  }
};
new google.maps.places.Autocomplete(address, options);


//postal
var postal = document.getElementById('postalCode');
var options = {
  types: ['(regions)']
}
var autocomplete = new google.maps.places.Autocomplete(postal, options);


//mixed
$("#autocomplete").geocomplete({
  details: "#address"
}).bind("geocode:result", function(event, result) {
  $(".panel").slideDown();
});