Postpone google maps initialisation until after bootstrap tab is shown

Question

I\'ve researched a lot and it seems like a lot of people have had the same issue as me here, but i cant figure out how to fix it.

Basically i\'m initializing a googl

Answer 1

Bootstrap tabs (and carousels and modals) are initially set to display none, until they become active, so the parent element of your map has height / width of 0.

I had the same problem with Bootstrap3 as you. finally I ended up with the simple CSS solution.

.tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}