Google地图无法在Bootstrap UI标签中使用

Question

我使用Bootstrap Tabset来包装Bootstrap滑块和Google Map以及其他页面 但是，滑块工作正常，但谷歌地图无法正常工作，但它在街景中工作得很好 googlemap代码与其他页面完美配合 那会是什么错误？

Answer 1

I had recently the same issue. It seems the map is not well loaded because it cannot calculate the size correctly.

I solved it by creating the map once the tab is first displayed. Example:

var _map = null;

$('#imap').on('shown.bs.tab', function (e) {
    if (!_map) {
        // here initialize the map
    }
});

where #imap is the DIV id and 'shown.bs.tab' is the bootstrap event when the tab is shown