Javascript jQueryAccordion中的GoogleMaps在JSFIDLE中工作，但在手动调整窗口大小之前，地图不会加载到我的服务器上

我试图简单地做一个谷歌地图的扩展列表，让你找到一个项目。在这里，我有一个静态HTML页面，您可以单击记录，它们将展开以显示Google地图。但是，在调整页面大小之前，地图只能显示为灰色

下面是有问题的页面（扩展名是php，但实际上没有）：

我已经在调用

google.maps.event.trigger（映射[I]，'resize'）在代码中（通过查看源代码可以看到），我和其他一些人尝试过模拟窗口的大小调整，但没有效果

下面是一个JSFIDLE，上面的代码被复制/粘贴到FIDLE中，它可以工作：

或者，我的服务器上有一个不工作的较短版本：

我的服务器上缺少什么？服务器是在AWS EC2集群上运行nginx的ubuntu，但一旦代码是客户端的，我就不明白为什么这会很重要（但更安全的解释是）。
问题是，在初始化Google Maps时，您的
.map
元素被隐藏。可以通过将第一个手风琴面板默认设置为打开，然后贴图渲染来测试这一点

要解决此问题，需要在打开手风琴面板时触发
调整大小
事件。下面的代码修订版就是这样做的。我已经用托管在您的服务器上的示例对此进行了测试，并且效果良好

(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)

您的maps变量是否在正确的范围内？@geocodezip我相信是这样。这两个地方（在我的服务器和JSFIDLE上）的代码完全相同，而FIDLE（有效）是基于您昨天教我的“居中”问题。您的网站上有一个jquery.ready内部函数。@geocodezip是的，但当我删除它时（刚刚删除了，请重新访问查看）它不会改变行为。当我把它添加到提琴上时，它不会破坏任何东西：所以我认为这不是一个因素……我错了吗？我建议创建一个复制问题的网站。你的网站有些不同。这似乎（主要是）正在工作，但地图现在没有居中：编辑到
fubar.php
，仍然没有加载居中…JS控制台中没有错误。这很有意义，如果地图仍然是高度0，那么居中显然也会将其放置在0,0。它现在可以工作了，非常感谢！我不能在24小时内奖励奖金；如果我仍然即使没有给你之后，请随时提醒我！原来还有一个错误：如果你点击打开一个地图，然后点击它关闭它，然后点击它再次打开它，它将不会再打开。点击关闭我得到
无法读取属性“\u e_”的未定义的
在JS控制台。可以复制在这里：Nevermind，我明白了吗t我自己：只需将手风琴活动触发器的更改包装到
map
，并检查是否存在未定义项，如下所示：