Google Maps API - 地图错位在框架上答案

【问题标题】：Google Maps API - Map misplaced on frameGoogle Maps API - 地图错位在框架上
【发布时间】：2012-01-06 14:05:07
【问题描述】：

链接：http://www.bastosviegas.com/mapa（请滚动“interactivo”查看谷歌地图）

如您所见，地图没有以正确的坐标居中，并且在您最大化/最小化页面之前它会出错。

有人遇到过这个错误吗？如果是这样，您是如何做到的？

【问题讨论】：

您发布的网址上没有 Google 地图。我根本不会说意大利语，我应该在输入框中输入一些东西吗？ 'interactivo' 也什么都不做（Chrome 16）
对不起，我刚刚搞砸了。它现在应该在那里。它是葡萄牙语，但是是的，您必须通过“interactivo”才能看到谷歌地图。我会在 OP 中提到它。
初始化地图的javascript代码是什么？在 mouseover/interactivo 悬停期间显示它的 javascript 代码是什么？
也许地图的尺寸不正确，因为它不可见？如果您延迟地图的初始化（直到 map_canvas 可见），它是否按预期工作？我以前遇到过这种情况，但那是在调整视口 div 的大小时。如果你调整它的大小，你必须让谷歌地图知道，否则它不知道中心在哪里或要加载多少 tiles。

标签： javascript google-maps map google-maps-api-3

【解决方案1】：

这不是错误，只要您操作包含地图的 div，您应该使用此触发器触发地图调整大小：google.maps.event.trigger(map, 'resize');

我会将此触发器添加到鼠标悬停事件中。

这是一个例子：

function initialize() {
    var map;
    var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
    var options = {
        zoom: 6,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);

    //when map is shown, trigger resize
    $('#hoverbtn').hover(function(){
       $('#map').show(); 
       google.maps.event.trigger(map, 'resize');
    });

}

以上代码的Fiddle example

【讨论】：