在擴展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