Untitled

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html,
    body {
      font-family: Arial;
    }
    input {
      width: 100%;
    }
    label {
      font-weight: bold;
      display: block;
    }
  </style>
</head>

<body>

  <div class="container" style="padding: 40px">
    <label>Enter a location</label>
    <input id="location" value="" class="form-control" />
  </div>

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places">
  </script>
  <script>
    var el = document.getElementById('location');
    var autocomplete = new google.maps.places.Autocomplete(el);

    setTimeout(function() {
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        console.log("place_changed");
        var place = autocomplete.getPlace();
        if (place.geometry.location) {
          setTimeout(function() {
            el.value = place.name;
          }, 100);
          console.log(place);
        }
      });
    });
  </script>
</body>

</html>