Php 引导转盘、谷歌地图和高级自定义字段

我正在建立一个wordpress网站（这里：），它需要在联系人页面上有一个全页面宽度的谷歌地图。企业有两个地址，因此他们实际上需要两个地图，并在它们之间切换。我正在使用高级自定义字段插件为用户提供更新/编辑地址的功能

问题出在这里。为了提供在两个地图之间来回切换的功能，我决定将它们放在twitter引导旋转木马中。每张地图一张幻灯片。这与预期的一样，只存在一个问题。包含在非活动幻灯片中的地图（例如，页面加载时没有“活动”类的幻灯片）似乎没有完全加载。如果我把地图并排放在页面上，而不使用旋转木马，则它们加载不会有问题

因为我使用的是高级自定义字段，所以映射是使用php加载的。以下是我的模板文件中的HTML/php：

`

将javascript代码更改为使用visibility:hidden而不是display:none谢谢！实际应用于css:`.carousel-inner>.item{display:block；visibility:hidden；}.carousel-inner>.active{visibility:visible；}`解决了加载问题，但导致幻灯片堆叠。正在尝试找出如何在不使用“显示无”的情况下正确定位它们。已添加：。旋转木马内部>。项{显示：块；可见性：隐藏；高度：0；}。旋转木马内部>。活动{可见性：可见；高度：自动；}这种方式可以工作，但会导致幻灯片突然“卡入”外观，而不是滑入。不理想。谷歌地图需要固定的高度和宽度进行渲染。fix表示300px，而不是百分比。显示：无会导致div为0px 0px，这就是它无法正确渲染的原因。
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
    <!-- map 1 -->
    <?php $map1 = get_field('map_1'); if( !empty($map1) ): ?>
        <div class="acf-map" id="map1">
            <div class="marker" data-lat="<?php echo $map1['lat']; ?>" data-lng="<?php echo $map1['lng']; ?>"></div>
        </div>
   <?php endif; ?>
   </div>

    <div class="item">
    <!-- map 2 -->
    <?php $map2 = get_field('map_2'); if( !empty($map2) ): ?>
        <div class="acf-map" id="map2">
           <div class="marker" data-lat="<?php echo $map2['lat']; ?>" data-lng="<?php echo $map2['lng']; ?>"></div>
    </div>
    <?php endif; ?>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#map-carousel" data-slide="prev"></a>
  <a class="right carousel-control" href="#map-carousel" data-slide="next"></a>
</div>`