谷歌地图加载异常答案

【问题标题】：Google Maps loading strangely谷歌地图加载异常
【发布时间】：2011-05-19 11:09:40
【问题描述】：

我在我的网站上使用 Google Maps API (v3) 来显示以某个位置为中心的地图。

这是我的代码：

<script type="text/javascript">
$(document).ready(function() {
    var latlng = new google.maps.LatLng(-22.924484, -43.208001);
    var map = new google.maps.Map(document.getElementById("map-property2"), {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});
</script>

在我的<head> 末尾我有：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

结果如下：

如您所见，那里好像有两张地图。但是如果我调整窗口大小，地图就固定了！

还有一个问题：看到地图的最左上角了吗？这是latlng 变量的位置。这应该是地图的中心，但它加载为左上角。：/

Ps.：我的 Firebug JS 控制台上没有错误或警告。

我在这里找到了解决方案：Major Google Maps glitch using API V3

并对其进行测试，我发现了另一件事：我正在尝试将地图加载到一个隐藏的 div（不是地图画布，而是拥有它的容器）上，当我单击选项卡菜单时会显示该 div。

如果在选项卡处于活动状态且容器可见时加载地图（使用setTimeout），则地图加载正常。

我要疯了……真的。

【问题讨论】：

标签： google-maps google-maps-api-3 position

【解决方案1】：

如果您在隐藏的 div 中有一个地图，然后决定显示您需要在地图上触发调整大小事件的 div。

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

【讨论】：

【解决方案2】：

问题是因为您无法在隐藏容器的情况下加载地图...我的解决方案是在显示选项卡后加载地图，使用以下代码：

$('ul.tabs li a[rel="location"]').click(function() {
    setTimeout(function() {
        var latlng = new google.maps.LatLng(-22.924484, -43.208001);
        var map = new google.maps.Map(document.getElementById("map-property2"), {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Property location"
        });
    }, 500);
});

【讨论】：

【解决方案3】：

我知道你已经找到了答案，但我发现了 2 个更有趣的解决方案：

Problems with Google Maps API v3 + jQuery UI Tabs

Keep a Google Maps v3 Map hidden, show when needed

【讨论】：