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

Question

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

---

情况:

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

怎么了:

地图显示并且所有功能都有效但是地图的左上角"正方形"有一个小故障.

我被卡住了!

---

编辑:现在使用代码:

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