Javascript jQuery选项卡中的Wordpress ACF谷歌地图

关于jQuery选项卡中的Google地图，我有一个小问题。每个选项卡中都会放置一个谷歌地图，但只有第一个选项卡中的地图会按预期显示。我已经在Stackoverflow的每一篇文章中找到了与此相关的内容，但还没有找到解决方案。我想如果有人和我有同样的问题，我会在这里写我自己的帖子

与我的问题不同的是，我使用Wordpress中的高级自定义字段在选项卡中生成Google地图

以下是指向文档的链接：

我使用了文档页面上的jQuery代码

带有“resize”触发器的jQuery代码：

这是我的HTML：

<div id="tabs" class="content">

  <div class="tabs">
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </div>

  <div id="tabs-1" class="tab_content">
    <!-- ACF Google Map here -->
  </div>

  <div id="tabs-2" class="tab_content">
    <!-- ACF Google Map here -->
  </div>

  <div id="tabs-3" class="tab_content">
    <!-- ACF Google Map here -->
  </div>

</div>

我无法提供ACF Google Map html元素的代码，因为它是由ACF插件生成的，这是一个很大的代码片段。我会提供一个测试页面，但我没有一个服务器来托管Wordpress站点

我希望有人有知识来帮助我

---

提前感谢。

您现在处理的不是ACF问题，而是Google Maps/CSS/JS问题。发生的情况是，当选项卡不在视图中时，它被视为“0”高度。因此，当它处于活动状态时，它不知道如何更改高度。其他人建议在标签上使用监听器（特别是如果框架像基金会的回流那样本机支持监听器），但是谷歌地图，我不确定是否会更新它。我还没有找到一个行之有效的方法。你现在处理的不是ACF问题，而是Google地图/CSS/JS问题。发生的情况是，当选项卡不在视图中时，它被视为“0”高度。因此，当它处于活动状态时，它不知道如何更改高度。其他人建议在标签上使用监听器（特别是如果框架像基金会的回流那样本机支持监听器），但是谷歌地图，我不确定是否会更新它。我还没有找到一个行之有效的方法。

<div id="tabs" class="content">

  <div class="tabs">
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </div>

  <div id="tabs-1" class="tab_content">
    <!-- ACF Google Map here -->
  </div>

  <div id="tabs-2" class="tab_content">
    <!-- ACF Google Map here -->
  </div>

  <div id="tabs-3" class="tab_content">
    <!-- ACF Google Map here -->
  </div>

</div>