jQuery手风琴中的Google Maps在JSFIDDLE中起作用，但是直到手动调整窗口大小之前，我的服务器上都不会

Question

我正在尝试简单地列出Google地图的扩展列表，以允许您找到一个项目。在这里，我有一个静态HTML页面，您可以在其中单击记录，它们将展开以显示Google Map。但是，地图仅作为灰色出现，直到您调整页面。

这是有问题的页面(扩展名为php，但实际上没有任何问题(：https：//yt074.addons.la/tmp/track/track/list.php

我已经在代码中调用google.maps.event.trigger(maps[i], 'resize');(如您可以通过查看源可以看到的(，并且我尝试了jQuery(window).trigger('resize');，window.dispatchEvent(new Event('resize'));和其他一些窗口来模拟窗口大小的调整，但无济于事。

这是一个带有代码的JSFiddle，从上面的代码几乎复制/粘贴到小提琴中，它有效：https：//jsfiddle.net/myingling/lkdmp1zo/

或这是我的服务器上较短的版本，它无法正常工作：https：//yt074.addons.la/tmp/track/fiddle.php

我在服务器上缺少什么？服务器是Ubuntu在AWS EC2群集上运行nginx，但是一旦代码为客户端，我就不明白为什么这很重要(但可以安全解释(。

Answer 1

问题是当Google Maps初始化时，您的.map元素被隐藏。您可以通过将第一个手风琴面板设置为默认打开，然后将地图渲染进行测试。

要解决该问题，您需要在打开手风琴面板时触发resize事件。您的代码的以下修订版可以做到这一点。我已经用托管在您的服务器上的示例进行了测试。

(function ($) {
    var maps = [];
    var $accordion = $('#accordion').accordion({
        active: false,
        collapsible: true
    });
    $accordion.on('accordionactivate', function(event, ui) {
        var map = ui.newPanel.find('.map').data('map');
        google.maps.event.trigger(map, 'resize');
        map.setCenter(map._center);
    });
    $accordion.find('.map').each(function(i, o) {
        var latLong = new google.maps.LatLng($(o).data('lat'), $(o).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: $(o).data('time')
        });
        map.setCenter(latLong);
        map._center = latLong;
        $(o).data('map', map);
    });
})(jQuery)