How to make map point center on all window when map has responsive layout?

Question

I am having problem in making responsive map. because when I re-size my browser width map not stay center. I would like the map to stay center (responsive).

css for the map

.map {
  width: 440px;
}

@media only screen and (max-width: 768px)

.map {
  width: 250px;
}

and jquery

<script>

var map;
var markers = [];
var bounds = new google.maps.LatLngBounds();

map = new google.maps.Map(document.getElementById("map"), 


infoWindow = new google.maps.InfoWindow();


var latlng = new google.maps.LatLng(parseFloat(-32.896614),parseFloat(151.697491));   

var marker = new google.maps.Marker({ map: map, position: latlng });
//map.setZoom(1);

var html = "<a href='http://www.gate7infotech.com/projects/development/ron-job-boar/?job_board=kooinda-work-based-child-care-centre'><b>Kooinda Work Based Child Care Centre </b></a> <br/><p>The University of Newcastle University Drive</p><p>Callaghan, New South Wales</p><p>NSW 2308, Australia</p><br>";
//var cleanaddy = address.replace(/<\/?[^>]+(>|$)/g, "");
html +='<form action="http://maps.google.com/maps" method="get"" target="_blank">'+'<input type="hidden" name="daddr" value=""/>';

google.maps.event.addListener(marker, 'click', function(){

infoWindow.setContent(html);
infoWindow.open(map, marker);
});


markers.push(marker); 

bounds.extend(latlng);
 map.fitBounds(bounds);
setTimeout(function() { map.setZoom(15); } , 800);
</script>

on full screen map like this:

when i am making it responsive its not showing point in center, like:-

I want to get the point in center.

Answer 1

One option is to set map event listener on bounds_changed and set center to known point on each change. For example:

    var center = new google.maps.LatLng(41.850033, -87.6500523);
    ...
    google.maps.event.addListener(map, 'bounds_changed', function() {
        map.setCenter(center);
    });