Google map in responsive map doesn't center map - google-maps

Question

I have a problem with google map. I embeeded it into responsive web. Everything's fine, map behaves responsivly, but when I change the window size, for example open the page on a mobile phone, it just cuts from the map, when it's resizing, but I need it to center the map. I need the locations be still visible and I don't know how to do it. Could anyone help me? Hope my question is comprehensible. Thanks.
API call:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
JS code:
function initialize() {
var myLatlng = new google.maps.LatLng(48.652645, 21.083107);
var mapOptions = {
zoom: 11,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(map, beaches);
}
var beaches = [
['xxxx'],
['xxxx']
];
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

Create a bounds global variable.
Extend the bounds object when adding your markers.
On window resize, trigger a map resize and make the map fit the bounds object.
Global variable:
var bounds = new google.maps.LatLngBounds();
Extend the bounds in the setMarkers function:
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
bounds.extend(myLatLng);
}
Add this to your initialize function:
window.addEventListener("resize", resizeUI);
Create a resize function:
function resizeUI() {
google.maps.event.trigger(map, 'resize');
map.fitBounds(bounds);
}
Untested, but you get the idea...