ACF：在前端显示Google地图问题

若要在前端中显示Google地图，需要安装并启用“ACF: Google Maps”插件。

1.在functions.php文件中添加以下代码：

add_filter('acf/init', 'my_acf_init');
function my_acf_init() {
    acf_update_setting('google_api_key', 'YOUR_API_KEY_HERE');
}

2.在WordPress后台中创建自定义字段并将其类型设置为“Google Map”，然后将其添加到相关职位或文章中。

// 获取Google地图字段的值
$location = get_field('location');
$coords = array(
    'lat' => $location['lat'],
    'lng' => $location['lng'],
);

3.在需要在前端中显示Google地图的页面中添加以下代码：

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

<style type="text/css">
.acf-map {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
}

/* 视觉上的地图标记 */
.marker {
    position: relative;
    background: #BE1E2D;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
}

/* 地图弹出框 */
.marker:hover:after,
.marker:focus:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-bottom: 10px solid #BE1E2D;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
</style>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript">
(function($) {
    function new_map( $el ) {
        var $markers = $el.find('.marker');
        var args = {