Maps API v3 Places Autocomplete

Simple Places API autocomplete field

by upsidown

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&amp;libraries=places"></script>
<input id="autocomplete" placeholder="Enter your address" type="text">
<div id="geometry">

</div>

CSS

#autocomplete {
  width: 300px;
}

#geometry {
  margin-top: 10px;
  background: #EAE19D;
  padding: 10px 20px;
}

JavaScript

function initialize() {

  var ac = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });

  ac.addListener('place_changed', function() {

    var place = ac.getPlace();

    if (!place.geometry) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    }

    var html = '<div>Latitude: ' + place.geometry.location.lat() + '</div>';
    html += '<div>Longitude: ' + place.geometry.location.lng() + '</div>';

    document.getElementById('geometry').innerHTML = html;
  });
}

initialize();