谷歌地图无法在模式窗口中正确呈现答案

【问题标题】：Google Maps not rendering correctly in modal window谷歌地图无法在模式窗口中正确呈现
【发布时间】：2012-12-28 15:32:40
【问题描述】：

在模式窗口中加载谷歌地图时遇到问题。基本上，当模式窗口打开时，我会加载地图，但它并没有完全渲染。

我提供了一个示例，以便您更好地理解问题。有人知道如何解决这个问题吗？

<html>

<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
    <script>
        $(document).ready(function(){
            $("#link").colorbox({
                inline:true, 
                width:"50%", 
                onOpen: function(){
                    $('#cboxClose').remove();
                    var script = document.createElement("script");
                        script.type = "text/javascript";
                        script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=showMapsStep1";
                        document.body.appendChild(script);
                }
            });


            window.showMapsStep1 = function(){


                var mapOptions = {
                    zoom: 8,
                    center: new google.maps.LatLng(-34.397, 150.644),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);

                $('#canvas').show();
            }
        });
    </script>
</head>

<body>
    <a href="#box" id="link">Open modal <a/>

    <div style='display:none'>
        <div id='box' style='height: 300px; width: 500px;' >
            <div id="canvas" style="height: 100%; width: 100%;"></div>
        </div>
    </div>
</body>

</html>

编辑：这是在谷歌浏览器上测试的。如果我调整窗口大小，地图将正确呈现

【问题讨论】：

如果高度和宽度未设置为像素值，我遇到了谷歌地图的问题。尝试一下，因为无论如何你只是在使用 100%
你有一个工作的例子也试试缩放：1，看看这是否能工作，然后你可以尝试再放大一些
@NuclearGhost 在我的代码（不是本示例）中，我按像素定义高度和宽度，但这并不能解决问题
@IvoJonkers 这并不能解决问题
我做了更多的测试，我认为这与 gmaps 在隐藏元素时无法检索高度和宽度值有关，因为如果我设置了绘制地图的超时时间，所以它是在模态打开后绘制的，然后渲染得很好。

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

您必须触发“调整大小”地图事件。

var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);

google.maps.event.trigger(map, 'resize', function () {
    // your callback content
});

【讨论】：