How to reload Google Map in Bootstrap jQuery Tab

Question

I\'m using gmaps.js to load 2 maps in Bootstrap tabs. What happens, is the first map loads fine, but when the second tab (hidden) is clicked, the map doesn\'t load properly.

Answer 1

trigger the resize-event of the window when a tab is shown(shown fires later than click, when the tab is already visible):

$('.nav-tabs').on('shown.bs.tab', function () {
    google.maps.event.trigger(window, 'resize', {});
});

http://jsfiddle.net/BAm69/