Centre Google Map marker on resize

As you surf across the internet you see that Google Maps turn up on almost every website that you visit. I myself have used the API on a large number of websites, however it’s only recently (with the rise of mobile/responsive websites) I have wondered why when you resize the web browser, the map marker doesn’t necessarily stay centred in the middle of the screen.

Wrongly, I figured that people don’t resize their browser very often, so I ignored this problem for a while. Recently I came across someone who had a similar problem and came up with an awesome solution to fix this problem. Andrew from British development firm HSMoore posted a code snippet which checks the map whenever the browser is resized and re-centres the marker.

var mapOptions = {
    zoom: 2,
    center: new google.maps.LatLng(0,0), mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 
// The following helps re-centre the map on resize
google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

Did you know: You can also change the styles and colour scheme of Google Maps