How to manually reload Google Map with JavaScript

I am using this piece of code within a Bootstrap template. I am facing issues when loading images within a Bootstrap Tab content pane.

This is the JavaScript code which I use to initialize the Map:

var latlng = new google.maps.LatLng(50, 50);

var myOptions = {
    zoom: _zoom,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
};

var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'Google Office!'
});

I have not found any method(s) on the internet to manually reload a Google Map instance.

Is this possible and how? Thanks!


Yes, you can 'refresh' a Google Map like this:

google.maps.event.trigger(map, 'resize');

This basically sends a signal to your map to redraw it.

Hope that helps!


You can refresh with this:

map.panBy(0, 0);

map.setZoom(map.getZoom());

For some reasons, resize trigger did not work for me, and this one worked.