jqueryaccordion和googlemaps调整大小：仅最后一个窗格'；s地图工作

我已经使用jQuery UI创建了一个jQuery手风琴

有三个窗格，每个窗格都有一个谷歌地图

第一个窗格的贴图加载正确，但第二个和第三个窗格的贴图加载不正确

根据其他StackOverflow线程的建议，我决定在激活窗格时调用map resize和centralize函数

    $(document).ready(function(){
        $('.the-map').each(function(){
                render_map( $(this) );
        });
        $(function() {
            $("#contact-maps").accordion({
                 collapsible:true,
                 activate:function (event, ui){
                        google.maps.event.trigger(map, "resize");
                        center_map( map );
                        }
                      });
               });
})(jQuery);

但是，调整大小和居中功能仅适用于最后一个（第三个）窗格，而不适用于第二个窗格

更新：以下是JSFIDLE：

---

我缺少什么？

您只在其中一个地图对象上调用了

google.maps.trigger（map，'resize'）

（创建

map

对象的数组，并在手风琴更改时对所有对象调用resize）

代码段：

（函数（$）{
/*
*渲染映射
*
*此函数将在所选jQuery元素上呈现Google地图
*
*@type函数
*@date 8/11/2013
*@自4.3.0以来
*
*@param$el（jQuery元素）
*@return不适用
*/
var映射；
函数渲染映射（$el）{
//变量
var$markers=$el.find（'.marker'）；
//瓦尔斯
变量args={
缩放：16，
中心：新google.maps.LatLng（0,0），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//创建地图
map=新的google.maps.map（$el[0]，args）；
//添加标记引用
map.markers=[]；
//添加标记
$markers.each（函数（）{
添加_标记（$（此），映射）；
});
//中心地图
中心地图（地图）；
返回图；
}
/*
*添加标记
*
*此功能将向选定的Google地图添加标记
*
*@type函数
*@date 8/11/2013
*@自4.3.0以来
*
*@param$marker（jQuery元素）
*@param-map（谷歌地图对象）
*@return不适用
*/
函数add_marker（$marker，map）{
//变量
var latlng=new google.maps.latlng（$marker.attr（'data-lat'），$marker.attr（'data-lng'）；
//创建标记
var marker=new google.maps.marker({
位置：latlng，
地图：地图
});
//添加到数组
map.markers.push（marker）；
//如果标记包含HTML，则将其添加到信息窗口
如果（$marker.html（））{
//创建信息窗口
var infowindow=new google.maps.infowindow({
内容：$marker.html（）
});
//单击标记时显示信息窗口
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
}
/*
*中心地图
*
*此功能将使地图居中，显示附加到此地图的所有标记
*
*@type函数
*@date 8/11/2013
*@自4.3.0以来
*
*@param-map（谷歌地图对象）
*@return不适用
*/
功能中心地图（地图）{
//瓦尔斯
var bounds=new google.maps.LatLngBounds（）；
//循环遍历所有标记并创建边界
$.each（map.markers，function（i，marker）{
var latlng=new google.maps.latlng（marker.position.lat（），marker.position.lng（））；
边界扩展（latlng）；
});
//只有一个标记？
如果（map.markers.length==1）{
//设置地图中心
map.setCenter（map.markers[0].getPosition（））；
map.setZoom（4）；
}否则{
//合拍
映射边界（bounds）；
}
}
/*
*文件准备就绪
*
*此函数将在文档准备就绪（页面已加载）时呈现每个地图
*
*@type函数
*@date 8/11/2013
*@自5.0.0以来
*
*@param不适用
*@return不适用
*/
$（文档）.ready（函数（）{
var映射=[]；
$（'.map'）。每个（函数（i，val）{
console.log（i+），val:+val）；
push（render_map（$（this））；
});
$（函数（）{
$（“#联系人”）.手风琴({
可折叠的：是的，
激活：功能（事件、用户界面）{
对于（var i=0；i
.map{
宽度：400px；
高度：400px；
边框：#ccc实心1px；
边际：0px0；
}
#接触{
宽度：60%；
右侧填充：1em；
}

地图一
地图二
地图三
如果看不到整个代码，很难判断。如果需要，请提供JSFIDLEpossible@Moogs：在问题中添加了JSFIDLE。我现在可以在所有3个窗格中看到整个地图。。你更改代码了吗？部分映射两个负载。在我最新的谷歌浏览器上，只有左上角可见。