在jQuery切换div中调整google地图的大小-显示问题

我有一个显示谷歌地图的小div。点击按钮，我就有了map div面板，扩展了更大的简单jQuery切换

这可以正常工作，但一旦切换到较大的尺寸，地图将无法正确显示。我正在使用

google.maps.event.addDomListener(window, 'resize', function()

及

允许容器调整大小并重新对中贴图，但由于某些原因，它不起作用

这造成了灰色块的问题，而不是居中

以下是我使用的谷歌地图代码：

    function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644)
        });

        //Get current center
        var currCenter = map.getCenter();

        //Use event listener for resize on window
        google.maps.event.addDomListener(window, 'resize', function() {
        //Set Center
        map.setCenter(getCen);
    });

---

这里有一个JSFiddle链接来查看到目前为止我得到了什么：

如果我在

.toggleClass

函数运行后触发resize事件，它对我来说是有效的（要求是一旦div被调整大小，它就会被触发，因此如果有任何动画或异步延迟，您可能需要对此进行解释）

还要注意的是，要使

映射

调整大小

和

设置中心

正常工作，

映射

和

currCenter

变量需要在正确的范围内

$(document).ready(function() {
    $('.map-toggle').click(function(){
    $('.map').toggleClass('fullsize');
        google.maps.event.trigger(map, 'resize');
        map.setCenter(currCenter);
    });
});

代码片段：

$（文档）.ready（函数（）{
$（'.map toggle'）。单击（函数（）{
$（'.map'）.toggleClass（'fullsize'）；
google.maps.event.trigger（映射，'resize'）；
地图设置中心（currCenter）；
});
});
。清除{
明确：两者皆有；
显示：块；
字号：0；
身高：0；
线高：0；
宽度：100%；
}
#内容{
宽度：560px；
}
.map节{}.map{
宽度：140px；
高度：200px；
浮动：对；
}
.地图.全尺寸{
宽度：100%；
}
.map切换{}.student结果主{
浮动：左；
宽度：390px；
背景：ddd；
最小高度：300px；
}
.学生成绩侧边栏{
浮动：对；
宽度：140px；
背景：#eee；
最小高度：300px；
}

var中心；
var映射；
函数initMap（）{
var mapDiv=document.getElementById（'map'）；
map=新的google.maps.map（mapDiv{
缩放：8，
中心：新google.maps.LatLng（-34.397150.644）
});
//获取当前中心
currCenter=map.getCenter（）；
//使用事件侦听器调整窗口大小
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
//居中
地图设置中心（currCenter）；
});
}
切换
如果我在
.toggleClass
函数运行后触发resize事件（要求在div调整大小后触发该事件，因此如果存在任何动画或异步延迟，您可能需要对此进行说明），则它对我有效

还要注意的是，要使
映射
调整大小
和
设置中心
正常工作，
映射
和
currCenter
变量需要在正确的范围内

$(document).ready(function() {
    $('.map-toggle').click(function(){
    $('.map').toggleClass('fullsize');
        google.maps.event.trigger(map, 'resize');
        map.setCenter(currCenter);
    });
});


代码片段：


$（文档）.ready（函数（）{
$（'.map toggle'）。单击（函数（）{
$（'.map'）.toggleClass（'fullsize'）；
google.maps.event.trigger（映射，'resize'）；
地图设置中心（currCenter）；
});
});
。清除{
明确：两者皆有；
显示：块；
字号：0；
身高：0；
线高：0；
宽度：100%；
}
#内容{
宽度：560px；
}
.map节{}.map{
宽度：140px；
高度：200px；
浮动：对；
}
.地图.全尺寸{
宽度：100%；
}
.map切换{}.student结果主{
浮动：左；
宽度：390px；
背景：ddd；
最小高度：300px；
}
.学生成绩侧边栏{
浮动：对；
宽度：140px；
背景：#eee；
最小高度：300px；
}

var中心；
var映射；
函数initMap（）{
var mapDiv=document.getElementById（'map'）；
map=新的google.maps.map（mapDiv{
缩放：8，
中心：新google.maps.LatLng（-34.397150.644）
});
//获取当前中心
currCenter=map.getCenter（）；
//使用事件侦听器调整窗口大小
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
//居中
地图设置中心（currCenter）；
});
}
切换