Maps API v3 Places Autocomplete

Simple Places API autocomplete field

by lucaslazaro

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>
  <div class="box">
    <input id="autocomplete" placeholder="Enter your address" type="text" />
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>

CSS

.box {
  position: relative;
  height: 200vh;
}

#autocomplete {
    width:350px;
    position: absolute;
}

JavaScript

function initialize() {
	 	var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
    new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), options);
}

initialize();