谷歌地图v3出现扭曲和加倍

Question

此代码适用于jsfiddle和任何其他JavaScript沙盒应用程序，但它在我的网站上不起作用。

HTML：

<div id="mapcontainer" style="position:absolute;width:280px;height:160px;"></div>

JS：

<script src="http://maps.googleapis.com/maps/api/js?key=*********************************&sensor=false"></script>
<script>
    var myCenter = new google.maps.LatLng(33.436150, -117.623090);

    function initialize() {
        var mapProp = {
            center: myCenter,
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("mapcontainer"), mapProp);

        var marker = new google.maps.Marker({
            position: myCenter,
        });

        marker.setMap(map);

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

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

看起来像这样：

注意顶部2/3是如何扭曲的，底部1/3是好的。我该如何解决这个问题？

Answer 1

  

似乎代码中肯定存在其他一些问题。

您的Google地图代码看起来很完美，我已经制作了fiddle来显示差异。

从您的脚本中，您似乎使用Google地图的密钥。我认为在v3中没有必要这样做。所以尝试更换它，如下所示。

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Answer 2

在我正在开发的谷歌地图上遇到同样的问题后，我偶然发现了这个页面。我想出的解决方案是在google map javascript之后添加以下代码。

$(window).resize(function(){ initMap(); });

＆＃34; initMap（）;＆＃34;部分是这样它只是刷新地图功能。如果您将该函数命名为不同的函数，则需要使用该函数。 最终我意识到这是问题的补丁。但它的作用就像魅力一样，对最终用户来说几乎看不到。您正在做的就是在调整窗口大小时刷新地图功能。

Answer 3

由于在评论中解决了这个问题，我想出了类似的问题。

这是一个用css调试器查看地图中的一个图像并查看它是否受页面上任何其他样式影响的情况