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

【问题标题】：Major Google Maps glitch using API V3使用 API V3 的主要谷歌地图故障
【发布时间】：2011-04-02 00:11:38
【问题描述】：

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

情况：

用户点击地图图像
google maps API V3 通过 ajax
地图显示在对话窗口中 /灯箱

会发生什么：

地图显示并且所有功能都可以正常工作，但是地图左上角的“正方形”出现了故障。

我被困住了！

编辑：现在有代码：

<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>

【问题讨论】：

我第一次访问您的网站（Safari 5）时很好，但在随后的访问中我明白了您的意思！我认为标记也将颜色从红色（当它工作时）变为蓝色（当它没有工作时）......你能发布一些代码吗？
@sonia 我已经更新了问题，感谢您的关注！

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

【解决方案1】：

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

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

*简单的解决方案：

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

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

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

【讨论】：

【解决方案2】：

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

加载效果结束后尝试让它调整大小：

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

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

【讨论】：