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="map-canvas"></div>

CSS

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

#target {
        width: 345px;
      }

JavaScript

function initialize() {
   var center =  new google.maps.LatLng(56.05, 10.4);
   var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: center,
      zoom: 7
    });

  var request = {
    location: center,
    radius: '50000',
    types: ['store']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
  
  var places = [],
      markers = [];
    
function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      place = new Object ({
        name: results[i].name,
        photo: typeof results[i].photos !== 'undefined' ?
          results[i].photos[0].getUrl({'maxWidth': 100, 'maxHeight': 100})
          : undefined,
        loc: results[i].geometry.location,
        rating: results[i].rating,
      });
      places.push(place);
      var marker = new google.maps.Marker({
        map: map,
        position: results[i].geometry.location,
        id: i,
        visible: true
      });
      markers.push(marker);
    }
  }
  //newresult();
}
}

google.maps.event.addDomListener(window, 'load', initialize);