javascript - 嵌入的 Google map 显示为灰色

Question

我已按照本教程 ( https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map ) 使用 google map API 将 map 嵌入到我的页面上。相关 map 嵌入在 Twitter Bootstrap 选项卡式内容项中，如下所示:

从上图中可以看出， map 无法正确显示，并且大部分由灰色背景组成。这是为什么？我可以做什么来解决这个问题？请参阅下面我的代码:

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 搜索来确定此问题的解决方案，我所看到的所有内容都建议将以下内容添加到我的 document.ready 中:

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

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

但是，我已经尝试过了，不幸的是它没有什么区别。

任何帮助将不胜感激。

注意。我已经成功地整理了一个 fiddle 来演示这个问题:

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

Answer 1

看来 map 必须在具有尺寸的元素中呈现。因为我使用的是选项卡，并且“ map ”选项卡在页面加载时默认隐藏，所以选项卡内的所有元素在其父元素被隐藏时都没有尺寸。因此 map 不知道如何正确渲染。要解决此问题，我们需要在单击 map 选项卡后调整 map 大小。我将 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);

    }

此解决方法仅在 map 容器处于事件状态时初始化 map ，这意味着它具有可使用的维度。我现在将其改进为仅在第一次单击选项卡时运行。

最终的 fiddle 可以在这里找到:

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