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

This might be helpful, no JavaScript tricks needed.

.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;
}

https://stackoverflow.com/a/32551984/3072600

Answer 2

You should be able to attach a handler to the Bootstrap tab show event..

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    initialize();
});

Working demo: http://bootply.com/102241

Answer 3

http://bootply.com/102479

Add an id to your map tab link so it's easier to identify. Trigger a map resize event when the corresponding tab content is shown.

This way the map is only initialized once, which is not the case with the previous answer.

Note that you need to define the map variable outside of the initialize function.

Answer 4

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;
}

Answer 5

$('#myTab a[href="#location"]').on('shown.bs.tab', function (e) {
    initialize();
});

Answer 6

I tried to make it to center on each tab click.. but seems need to initialize everytime ...

@MrUpsidown any other way we can center the actual location without initializing everytime?

Possible solution ..
https://stackoverflow.com/a/25347742/3752338