使用API​​ V3的主要Google Maps故障

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

---

情况：

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

怎么了：

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

我被卡住了！

---

编辑：现在使用代码：

  $(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 }); })  

Answer 1

感谢Alphonso指出我正确的方向。

问题出在map div的维度上，即使#map_canvas的高度和宽度通过文档顶部的css应用，看起来google maps API在应用样式之前初始化（这个理论可以测试与dynatrace）。

*简易解决方案：

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

2）使用setTimeout()延迟加载地图

Answer 2

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

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

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

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