javascript - 无法让 Google Maps JavaScript API 在 Bootstrap 模式中加载

Question

我无法在弹出模式中加载我的 Google Maps API。

HTML:

<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h2>Warehousing</h2>
                        <p class="item-intro text-muted"></p>
                        <div id="warehouse-map-canvas"></div>
                        <p class="item-description">Short description</p> <p class="item-description">Short description</p>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript:

<script>
    var map;
    function initialize() {
        var center = new google.maps.LatLng(41, -87);
        var mapOptions = {
          center: center,
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var mapCanvas = document.getElementById('warehouse-map-canvas');
        map = new google.maps.Map(mapCanvas, mapOptions);

        var marker = new google.maps.Marker({
            position: center,
            map: map,
            title: 'Warehouse'
        });

        /*google.maps.event.addListenerOnce(map, 'idle', function() {
           google.maps.event.trigger(map, 'resize');
           map.setCenter(center);

           This bit of code seems to do nothing for me.
        });*/
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

发生的事情是我点击并调出弹出模式， map div 空间被填充以显示谷歌地图元素，如缩放栏、街景图标等。然而，其中的 map 区域是灰色的。

您可以滚动、缩放和平移，但不会对 map 产生任何影响。 map 标记确实出现在屏幕的左上角，但位于灰色的海面上。

解决方案:

使用这个引导模式 js 和 css ( https://github.com/jschr/bootstrap-modal ) 我能够让 map 刷新:

$('#portfolioModal3').on('shown', function () {
   google.maps.event.trigger(map, 'resize');
   map.setCenter(new google.maps.LatLng(41, -87));
});

在 google.maps.event.addDomListener(window, 'load', initialize) 之后；

Answer 1

构建 map 时，它会测量父级的尺寸以便正确填充。

当您使用 google.maps.event.addDomListener(window, 'load', initialize); 初始化页面时，您的模式尚未创建，因此当您显示它时，尺寸是错了。

为避免这种情况，您必须仅在要显示模式时才初始化 map :

$('#portfolioModal3').on('shown.bs.modal', function() {
    initialize();
});