在扩展jQuery UI手风琴之后，Google Maps没有集中在其他地图上

Question

我在JavaScript Accordion UI中有一个Google Map，它将一个pin放在传递的纬度/经度和该引脚上的“中心”上。

对于第一张地图，它的工作原理。当您单击其他两个中的任何一个时，它似乎会将（销钉的底部）放置在地图的左上角。我已经拨打了resize，正如你在我的代码中看到的那样。

这里是演示了这一问题的小提琴：http://jsfiddle.net/myingling/1c4bjsff/2/

我敢肯定，这是简单的东西，但我缺少什么？

Answer 1

您需要保存每张地图的中心，然后在激活新手风琴后设置它（并且该地图具有大小，当地图/手风琴被隐藏时，其计算大小为零，因此标记以div的左上角为中心）。

一个选项：

var maps = []; 
jQuery("#accordion").accordion({ 
    change: function(event, ui) { 
    for (var i = 0; i < maps.length; i++) { 
     google.maps.event.trigger(maps[i], 'resize'); 
     maps[i].setCenter(maps[i]._center); 
    } 
    } 
}).find('.map').each(function(i, o) { 
    var latLong = new google.maps.LatLng(
    jQuery(this).data("lat"), jQuery(this).data("long")); 

    var map = new google.maps.Map(o, { 
    zoom: 12, 
    mapTypeId: google.maps.MapTypeId.ROAD, 
    center: latLong 
    }); 
    maps.push(map); 

    var marker = new google.maps.Marker({ 
    position: latLong, 
    map: map, 
    title: jQuery(this).data('time') 
    }); 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(latLong); 
    map._center = latLong; 
    jQuery(o).data('map', map); 
}); 

proof of concept fiddle