How to get search string parameter for Google Maps API v3 - google-maps

Question

I am trying to get all nearby points of interest based on user's query such as "Nearby ATMs" or "Nearby Hospitals" or "Nearby Bus Stops". I used the following js code:
function initialize_search() {
var input = document.getElementById('search');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
var resultList = [];
var service = new google.maps.places.PlacesService(map);
var search = document.getElementById('search').value;
var request = {
location: map.getCenter(),
radius: '5000',
query: search,
};
service.textSearch(request, function(results, status, pagination){
if (status == google.maps.places.PlacesServiceStatus.OK) {
resultList = resultList.concat(results);
plotResultList();
}
});
var overlays = [];
function plotResultList(){
var iterator = 0;
for(var i = 0; i < resultList.length; i++){
setTimeout(function(){
var marker = new google.maps.Marker({
position: resultList[iterator].geometry.position,
map: map,
title: resultList[iterator].name,
animation: google.maps.Animation.DROP
});
overlays.push(marker);
iterator++;
}, i * 75);
}
}
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
var request = {
reference: resultList[iterator].reference
};
service.getDetails(request, function(place, status){
var content = "<h2>" + name + "</h2>";
if(status == google.maps.places.PlacesServiceStatus.OK){
if(typeof place.rating !== 'undefined'){
content += "<p><small>Rating: " + place.rating + "</small></p>";
}
if(typeof place.formatted_address !== 'undefined'){
content += "<br><small>" + place.formatted_address + "</small>";
}
if(typeof place.formatted_phone_number !== 'undefined'){
content += "<br><small><a href='tel:" + place.formatted_phone_number + "'>" + place.formatted_phone_number + "</a></small>";
}
if(typeof place.website !== 'undefined'){
content += "<br><small><a href='" + place.website + "'>website</a></small>";
}
}
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
});
The html code I am using is:
<div id="search">
<input id="target" type="text" placeholder="Search Box">
<button onclick="plotResultList();">Search</button>
</div>
<div id="map-canvas"></div>
Now when I am loading this in my browser the search box is not working. Niether is it giving suggestions for places. When I enter "Nearby ATMs" on the google maps website they show all nearby ATMs. How do I implement this in my code?