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/

Answer 2

Try this way

http://jsfiddle.net/7PueE/

<li onclick="loadmap()"><a href="#loveland" id="tab2" role="tab" data-toggle="tab">Loveland</a></li>

function loadmap() {
    var nmap = new GMaps({
        div: '#loveland-map',
        lat: 40.431917,
        lng: -105.078848,
        width: '100%',
        height: '500px',
        scrollwheel: false,
    });
    nmap.addMarker({
        lat: 40.431917,
        lng: -105.078848,
        title: 'Loveland Office',
        infoWindow: {
            content: '<div class="bubble-wrap"><p class="office">Loveland Office</p><p>3820 N. Grant Ave.</p><p>Loveland, CO 80538</p><a href="https://www.google.com/maps/dir//3820+N+Grant+Ave,+Loveland,+CO+80538/@40.4319173,-105.0788668,17z/data=!4m13!1m4!3m3!1s0x8769528a066dd4ad:0x2b893ca80de0bd33!2s3820+N+Grant+Ave!3b1!4m7!1m0!1m5!1m1!1s0x8769528a066dd4ad:0x2b893ca80de0bd33!2m2!1d-105.0788668!2d40.4319173">Directions</a></div>'
        }
    });
}