Wordpress 如何在加载时触发第一个infowindow？

关于这个问题我找了很多。我似乎无法解决这个问题。更具体地说，我没有看到针对acf的解决方案。我不想重写所有的js来让它工作：）

我想在页面加载时触发reapeater字段的第一个标记器信息窗口

这是我的js代码，我从中提取并根据我的需要进行了调整：

    <script>
      (function($) {
        function render_map( $el ) {

          var $markers = $el.find('.marker');

          var styles = [
            {
              "featureType": "road",
              "stylers": [
                { "visibility": "simplified" },
              ]
            },{
              "featureType": "poi",
              "stylers": [
                { "visibility": "off" }
              ]
            },{
              "featureType": "landscape.natural.terrain",
              "stylers": [
                { "visibility": "off" }
              ]
            }
          ];

          var args = {
            zoom        : 16,
            center      : new google.maps.LatLng(0, 0),
            mapTypeId   : google.maps.MapTypeId.ROADMAP,
            zoomControl: true,
            zoomControlOptions: {
              style: google.maps.ZoomControlStyle.SMALL,
              position: google.maps.ControlPosition.RIGHT_BOTTOM
            },
            panControl: false,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            scrollwheel: false,
            mapTypeControlOptions: {
              mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
            }
          };

          // create map
          var map = new google.maps.Map( $el[0], args);
          var mapType = new google.maps.StyledMapType(styles, { name:"Grayscale" });
          map.mapTypes.set('tehgrayz', mapType);
          map.setMapTypeId('tehgrayz');

          // add a markers reference
          map.markers = [];

          // add markers
          $markers.each(function(){
              add_marker( $(this), map );
          });

          // center map
          center_map( map );
        }

        /*
        *  add_marker
        */
        function add_marker( $marker, map ) {
          // var
          var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

          // create marker
          var marker = new google.maps.Marker({
              position : latlng,
              map : map,
              icon: '<?php bloginfo('template_url'); ?>/img/marker.svg'
          });

          // add to array
          map.markers.push( marker );

          // if marker contains HTML, add it to an infoWindow
          if( $marker.html() ){
            // create info window
            var infowindow = new google.maps.InfoWindow({
              content       : $marker.html()
            });

            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open( map, marker );
            });
          }
        }

        /*
        *  center_map
        */
        function center_map( map ) {

          // vars
          var bounds = new google.maps.LatLngBounds();

          // loop through all markers and create bounds
          $.each( map.markers, function( i, marker ){
            var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
            bounds.extend( latlng );
          });

          // only 1 marker?
          if( map.markers.length == 1 ){
            // set center of map
              map.setCenter( bounds.getCenter() );
              map.setZoom( 16 );
          }else{
            // fit to bounds
            map.fitBounds( bounds );
          }
        }

        /*
        *  This function will render each map when the document is ready (page has loaded)
        */
        $(document).ready(function(){
          $('.acf-map').each(function(){
            render_map( $(this) );
          });
        });
      })(jQuery);
    </script>

（函数（$）{
函数渲染映射（$el）{
var$markers=$el.find（'.marker'）；
变量样式=[
{
“功能类型”：“道路”，
“造型师”：[
{“可见性”：“简化”}，
]
},{
“featureType”：“poi”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“特征类型”：“景观、自然、地形”，
“造型师”：[
{“可见性”：“关闭”}
]
}
];
变量args={
缩放：16，
中心：新google.maps.LatLng（0,0），
mapTypeId:google.maps.mapTypeId.ROADMAP，
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL，
位置：google.maps.ControlPosition.RIGHT\u底部
},
泛控制：错误，
mapTypeControl:false，
scaleControl:false，
街景控制：错误，
overviewMapControl:错误，
滚轮：错误，
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP，'tehgrayz']
}
};
//创建地图
var map=new google.maps.map（$el[0]，args）；
var mapType=new google.maps.StyledMapType（样式，{name:“Grayscale”}）；
map.mapTypes.set（'tehgrayz'，mapType）；
map.setMapTypeId（'tehgrayz'）；
//添加标记引用
map.markers=[]；
//添加标记
$markers.each（函数（）{
添加_标记（$（此），映射）；
});
//中心地图
中心地图（地图）；
}
/*
*添加标记
*/
函数add_marker（$marker，map）{
//变量
var latlng=new google.maps.latlng（$marker.attr（'data-lat'），$marker.attr（'data-lng'）；
//创建标记
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
图标：'/img/marker.svg'
});
//添加到数组
map.markers.push（marker）；
//如果标记包含HTML，则将其添加到信息窗口
如果（$marker.html（））{
//创建信息窗口
var infowindow=new google.maps.infowindow({
内容：$marker.html（）
});
//单击标记时显示信息窗口
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
}
/*
*中心地图
*/
功能中心地图（地图）{
//瓦尔斯
var bounds=new google.maps.LatLngBounds（）；
//循环遍历所有标记并创建边界
$.each（map.markers，function（i，marker）{
var latlng=new google.maps.latlng（marker.position.lat（），marker.position.lng（））；
边界扩展（latlng）；
});
//只有一个标记？
如果（map.markers.length==1）{
//设置地图中心
map.setCenter（bounds.getCenter（））；
map.setZoom（16）；
}否则{
//合拍
映射边界（bounds）；
}
}
/*
*此函数将在文档准备就绪（页面已加载）时呈现每个地图
*/
$（文档）.ready（函数（）{
$（'.acf map'）。每个（函数（）{
渲染_贴图（$（此））；
});
});
})（jQuery）；

下面是我在Reapter元素中循环的php代码：

      <?php if( have_rows('locations') ): ?>
        <div class="acf-map" id="map">
          <?php $count=0;while ( have_rows('locations') ) : the_row();
              $location = get_sub_field('location');
          ?>
            <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
              <h4><?php the_sub_field('title'); ?></h4>
              <p class="address"><?php echo $location['address']; ?></p>
              <p><?php the_sub_field('description'); ?></p>
            </div>
        <?php endwhile; ?>
        </div>
      <?php endif; ?>

传递给
$的第一个参数。每个
-callback都是集合中元素的索引。
检查索引是否为
0
，当它为0时，触发
单击
：

      $markers.each(function(index){ 
          add_marker( $(this), map );
          if(!index){
             google.maps.event.trigger(map.markers[0],'click');
          }
      });