Google Places Autocomplete

Make an autocomplete address field using Google Place Autocomplete api

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&amp;dummy=.js"></script>
<div id="panel">
<input id="location" type="text" placeholder="Search Box">
</div>
<div id="map-canvas"></div>

CSS

#map-canvas {
     height: 400px;
     width: 500px;
 }

#target {
        width: 345px;
      }

JavaScript

var input = document.getElementById('location');
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];
var geocoder = new google.maps.Geocoder();

function clearMarkers() {
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }
    markers = [];
}

function extractLocation(item) {
    var text = item.innerText || item.textContent;
    var upper = text.toUpperCase();
    var result='';
    for (var i=0;i<text.length;i++) {
        if (text[i]==upper[i]) {
            result+=' ';
        }
        result+=text[i];
    }
    return result;
}

function initialize() {
    var options = {
     zoom : 3,
     center: new google.maps.LatLng(-33.8902, 151.1759),
     mapTypeId: google.maps.MapTypeId.TERRAIN
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), options);

  //input search onkeyup event
  //on enter, select the first suggestion
  //lookup latlng by geocoder and place marker   
  input.onkeyup = function(e) {
      var code = (e.keyCode ? e.keyCode : e.which);
      var places = searchBox.getPlaces();
      if (code == 13 && places!=[]) {
        var firstSuggestion = document.querySelector('.pac-item');
        var query = extractLocation(firstSuggestion);
        geocoder.geocode({"address":query }, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
              clearMarkers();   
              var latLng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
              var marker = new google.maps.Marker({
                 map: map,
                 title: results[0].address_components[0].long_name,
                 position: latLng,
              });
              markers.push(marker);
              map.setCenter(latLng);
              map.setZoom(10);  
           }
	   });  
     }
  }
  
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
   ...