Question

我已按照本教程（https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map）使用google maps API将地图嵌入到我的页面中。有问题的地图嵌入在Twitter Bootstrap标签内容项中，如下所示：

Grey background

从上图中可以看出，地图无法正确显示，主要由灰色背景组成。为什么这样，我该怎么做才能解决这个问题？请参阅下面的代码：

HTML

    <div class="tab-wrapper">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#hotel-overview" data-toggle="tab">Overview</a></li>
            <li><a href="#hotel-rating" data-toggle="tab">Rating</a></li>
            <li><a href="#hotel-features" data-toggle="tab">Features</a></li>
            <li><a href="#hotel-gallery" data-toggle="tab">Gallery</a></li>
            <li><a href="#hotel-holidays" data-toggle="tab">Holidays</a></li>
            <li><a href="#hotel-map" data-toggle="tab">Map</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane active" id="hotel-overview">
                <p>Content..</p>
            </div>
            <div class="tab-pane" id="hotel-holidays">
                <p>Content..</p>
            </div>
            <div class="tab-pane" id="hotel-rating">
                <p>Content..</p>
            </div>
            <div class="tab-pane" id="hotel-features">
                <p>Content..</p>
            </div>
            <div class="tab-pane" id="hotel-gallery">
                <p>Content..</p>
            </div>
            <div class="tab-pane" id="hotel-map">
                <div id="google-map"></div>
            </div>
        </div>
    </div>

CSS

#google-map{
  width: 100%;
  height: 200px;
}

JAVASCRIPT

    $(document).ready(function () {
        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
            // Avoid following the href location when clicking
            event.preventDefault();
            // Avoid having the menu to close when clicking
            event.stopPropagation();
            // If a menu is already open we close it
            $(this).parent('.dropdown-submenu').find('ul.dropdown-menu').toggleClass('open');
        });

        google.maps.event.addDomListener(window, 'load', initialize);

    })

    function initialize() {
        var map_canvas = document.getElementById('google-map');
        var map_options = {
            center: new google.maps.LatLng(44.5403, -78.5463),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
    }

我已经运行了多次Google搜索来确定此问题的解决方案，我看到的所有内容都建议将以下内容添加到我的文档中。已经：

            $(window).resize(function() {
            google.maps.event.trigger('google-map', 'resize');
        });

        google.maps.event.trigger('google-map', 'resize');

但是，我已经尝试了这一点，不幸的是没有任何区别。

非常感谢任何帮助。

NB。我设法将一个小提琴放在一起展示了这个问题：

http://jsfiddle.net/jezzipin/J7ePY/1/

Answer 1

地图似乎必须在具有尺寸的元素中渲染。因为我正在使用选项卡，并且默认情况下在“页面加载”中隐藏了“地图”选项卡，所以选项卡内的所有元素在隐藏其父项时都没有维度。因此地图不知道如何正确渲染。要解决此问题，我们需要在单击地图选项卡后调整地图大小。我将我的Javascript文件修改为以下内容：

    $(document).ready(function () {
        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
            // Avoid following the href location when clicking
            event.preventDefault();
            // Avoid having the menu to close when clicking
            event.stopPropagation();
            // If a menu is already open we close it
            $(this).parent('.dropdown-submenu').find('ul.dropdown-menu').toggleClass('open');
        });

        var map;        
        //google.maps.event.addDomListener(window, 'load', initialize);

        $('a[href=#hotel-map]').on('click', function() {
            setTimeout(function(){
                initialize();
            }, 50);
        });         
    })

    function initialize() {
        var map_canvas = document.getElementById('google-map');
        var map_options = {
            center: new google.maps.LatLng(44.5403, -78.5463),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(map_canvas, map_options);

    }

此解决方法仅在地图容器处于活动状态时初始化地图，这意味着它具有要使用的维度。我现在将其细化为仅在第一次单击选项卡时运行。

最后的小提琴可以在这里找到：

http://jsfiddle.net/jezzipin/J7ePY/6/

嵌入式Google地图显示为灰色

1 个答案: