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

Question

编辑：现在已经解决了，请参阅下面的答案

---

情况：

1. 用户点击地图图片
2. 谷歌地图API V3通过加载 AJAX
3. 地图显示在对话框窗口中 / lightbox

会发生什么：

地图显示且所有功能都有效但是地图的左上角“正方形”会出现故障。

我被困住了！

---

编辑：现在使用代码：

<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指出我正确的方向。

问题在于地图div的尺寸，即使#map_canvas的高度和宽度通过文档顶部的css应用，看起来谷歌地图API在应用样式之前初始化（这个理论可以用dynatrace测试。）

*简易解决方案：

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

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

2）使用setTimeout()

延迟加载地图

Answer 2

我认为问题在于地图在调整大小动画完成之前初始化，所以它认为它更小。

尝试在加载效果完成后调整其大小：

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

（你必须保留对“地图”对象的引用