Javascript 点击谷歌地图标记，将wordpress帖子加载到div中

我正在一个Wordpress网站上工作，它的主页是谷歌地图。地图上的标记由帖子创建，每个帖子都有一个与其关联的位置（通过使用高级自定义字段）。我的目标是单击任何特定的标记，并让它将该标记的相关帖子加载到屏幕底部的一个div中

<div class="acf-map">
<?php if ( $query->have_posts() ) : while ($query->have_posts() ) : $query->the_post(); ?>
            <?php 

            $location = get_field('location');

            if( !empty($location) ):
            ?>

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

            <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>

只需将post id存储在标记上，这样您就可以使用它来检索post.Musa，谢谢，但是div实际上并没有被放置在地图中。有一个javascript调用，它获取div（使用类“marker”）并将它们存储到一个数组中，该数组将代码传递给GoogleMap的object literal以创建地图。
function add_marker( $marker, map ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng'))

    var postid = $marker.attr('id');

    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map,
        idofpost    : postid
    });

    // add to array
    map.markers.push( marker );
    var infowindow = new google.maps.InfoWindow({
      content:"<?php the_field('sound_description'); ?>"
    });

  $.each()
    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
}