javascript - 使用 API V3 的主要谷歌地图故障

Question

编辑:现在已经解决了，请看下面我的回答

---

情况:

1. 用户点击 map 图像
2. google maps API V3 加载通过 Ajax
3. map 显示在对话窗口中 /灯箱

发生了什么:

map 显示且所有功能正常，但 map 左上角的“正方形”出现故障。

我卡住了!

---

编辑:现在用代码:

<div id="map_canvas"></div>
<script type="text/javascript">
    $(function() {          
            var latlng = new google.maps.LatLng(51.448359,-2.590559);
            var options = {
              zoom: 13,
              center: latlng,
              mapTypeControl: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }; 

            var map = new google.maps.Map(document.getElementById('map_canvas'), options);

            var marker = new google.maps.Marker({
              position: new google.maps.LatLng(51.448359,-2.590559),
              map: map
            });
    })
</script>

Answer 1

感谢 Alphonso 为我指明了正确的方向。

问题出在 map div 的尺寸上，即使 #map_canvas 在文档顶部通过 css 应用了高度和宽度，谷歌地图 API 似乎在正在应用样式(可以使用 dynatrace 测试该理论)。

*简单的解决方案:

1) 宽度和高度的内联样式*

<div id="map_canvas" style="width: 700px; height: 400px"></div>

2) 使用setTimeout()

延迟 map 的加载