Zooming and centering the geocoded place using google maps api - google-maps

Question

I am working with the google maps api for one of my application. I have a textbox in which the user enters place name. It should geocode the users place name given in the textbox and zoom and center to that geocoded place name. I am successful in the geocoding but zooming and centre is not as expected. The code and output snapshot is provided.The black rectangle in the image is the place name that was geocoded based on the user input in the textbox. But zooming and centering is somewhere in the corner of the map. I want it to make the geocoded place name in the center of map.
var mapProp = {
center: x,
zoom: 4,
disableDefaultUI: true,
mapTypeId: layer,
mapTypeControlOptions: {
mapTypeIds: [layer]
}
};
var map = new google.maps.Map(document.getElementById("googlemaps"), mapProp);
var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();
map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
geocoder.geocode({
'address': place_name_filter
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
map.fitBounds(results[0].geometry.viewport);
} else {
alert(place_name_filter + " not found");
console.log("status : ", status);
}
});
Place_name_filter is the variable which holds the the place name entered in the textbox.
Output_Snapshot_for_the_above_code
Expected_Output

Answer 1

To zoom to a result from the geocoder use map.fitBounds and the .geometry.viewport (or geometry.bounds) LatLngBounds in the response.
code snippet:
function initialize() {
var mapProp = {
center: {
lat: 25,
lng: -90
},
zoom: 4,
};
var map = new google.maps.Map(document.getElementById("googlemaps"), mapProp);
var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();
var place_name_filter = "Abilene, TX";
geocoder.geocode({
'address': place_name_filter
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
map.fitBounds(results[0].geometry.viewport);
} else {
alert(place_name_filter + " not found");
console.log("status : ", status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#googlemaps {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googlemaps"></div>