使用API​​ V3主要谷歌地图毛刺 [英] Major Google Maps glitch using API V3

问题描述

编辑：这是现在解决了，请参阅下面

我的回答

---

情况：

1. 在用户点击地图图像
2. 在谷歌地图API V3是通过加载 AJAX
3. 的地图显示在一个对话窗口 /收藏夹

会发生什么：

该地图显示和所有功能的工作原理但有与地图的左上角的广场毛刺。

我卡！

---

编辑：现在code：

 ＆LT; D​​IV ID =map_canvas提供＆GT;＆LT; / DIV＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{
            VAR经纬度=新google.maps.LatLng（51.448359，-2.590559）;
            VAR的选择= {
              变焦：13，
              中心：经纬度，
              mapTypeControl：假的，
              mapTypeId：google.maps.MapTypeId.ROADMAP
            };

            VAR地图=新google.maps.Map（的document.getElementById（'map_canvas提供'），选项）;

            VAR的标记=新google.maps.Marker（{
              位置：新google.maps.LatLng（51.448359，-2.590559）
              地图：地图
            }）;
    }）
＆LT; / SCRIPT＆GT;
 

解决方案

感谢阿方索指着我正确的方向。

现在的问题是，在地图div的尺寸，即使 #map_canvas 不得不通过CSS在文档的顶部施加的高度和宽度，又好像在谷歌地图API的风格之前初始化中被应用（这个理论可以用的dynaTrace测试）。

* 轻松的解决方案：

1）内嵌样式宽度和高度*

 ＆LT; D​​IV ID =map_canvas提供风格=宽度：700像素，高度：400像素＆GT;＆LT; / DIV＆GT;
 

2）推迟地图的加载与的setTimeout（）

edit: this is now solved, see my answer below

---

The situation:

1. User clicks on a map-image
2. google maps API V3 is loaded via ajax
3. the map is shown in a dialog window / lightbox

What happens:

The map displays and all functionality works however there's a glitch with the top-left 'square' of the map.

I'm stuck!

---

edit: now with code:

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

解决方案

Thanks to Alphonso for pointing me in the correct direction.

The problem is in the dimensions of the map div, even though #map_canvas had a height and width applied via css in the top of the document, it would seem the google maps API initializing before the style was being applied (this theory could be tested with dynatrace).

*Easy solution:

1) inline styles for width and height*

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

2) delay the loading of the map with setTimeout()

这篇关于使用API​​ V3主要谷歌地图毛刺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！