Question

我已经阅读了一些与在jQuery标签中显示Google地图相关的问题。我知道在选项卡处于活动状态之后必须初始化或重新绘制地图，并尝试了很多来自SO的解决方案，但似乎没有一个适用于我的特定情况。

我正在使用Bootstrap 3标签，并使用Advance Custom Fields中的Google Maps自定义字段在转发器中生成地图。标签中有多个地图。

以下是标签页上的代码

<?php if( have_rows('info_accomm') ): ?>
<?php while( have_rows('info_accomm') ): the_row(); ?>

    <div class="embed-responsive embed-responsive-4by3">
       <?php 
            $location = get_sub_field('google_map');
            if( !empty($location) ):
        ?>

        <div class="acf-map">
            <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
        </div>

        <?php endif; ?>

    </div>

<?php endwhile; ?>
<?php endif; ?>

使用的JS是高级自定义字段网站的默认设置：http://www.advancedcustomfields.com/resources/google-map/

我希望在确定如何在选项卡中初始化多个地图时获得一些帮助。

Answer 1

以下是将两个地图放在一个页面中的简单示例。这是你需要的吗？

HTML：

<div id="map_1" style="width:700px; height:500px; margin-left:80px;"></div>
<div id="map_2" style="width:700px; height:500px; margin-left:80px;"></div>

JS：

<script type="text/javascript"> 
 var map,map2;

  function initialize(condition) {
  // create the map

var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(0.0, 0.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
    map = new google.maps.Map(document.getElementById("map_1"),
                                myOptions);

    map2 = new google.maps.Map(document.getElementById("map_2"),
                                   myOptions);  
}



</script>

Bootstrap 3中由高级自定义字段生成的Google地图

1 个答案: