Google maps 使用ACF谷歌地图的多个标记

我正在尝试制作一个显示多个自定义标记的谷歌地图。我目前有一个名为“地图”的转发器字段设置，在该转发器中有一个名为“谷歌地图”的谷歌地图和一个名为“描述”的描述文本框

我使用了ACF谷歌地图页面的代码，但它只显示了一个标记

<?php if( have_rows('map') ): ?>
<div class="acf-map" data-zoom="16">
    <?php while ( have_rows('map') ) : the_row(); 

        // Load sub field values.
        $location = get_sub_field('google_map');
        $title = get_sub_field('description');
        $description = get_sub_field('description');
        ?>
        <div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>"></div>

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

.acf地图{
宽度：100%；
高度：400px；
边框：#ccc实心1px；
利润率：20px0；
}
/*修复潜在的主题css冲突*/
.acf地图img{
最大宽度：继承！重要；
}

---

我找到了一个解释得稍微好一点的网站，基本上是复制了他们的代码，效果很好：

以下是我的代码，以防链接停止工作：

（函数（$）{
/*
*渲染映射
*
*此函数将在所选jQuery元素上呈现Google地图
*
*@type函数
*@date 8/11/2013
*@自4.3.0以来
*
*@param$el（jQuery元素）
*@return不适用
*/
函数渲染映射（$el）{
//变量
var$markers=$el.find（'.marker'）；
//瓦尔斯
变量args={
缩放：7，
中心：新google.maps.LatLng（0,0），
mapTypeId:google.maps.mapTypeId.ROADMAP，
disableDefaultUI:true，
风格：[
{
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#F5”
}
]
},
{
“elementType”：“labels.icon”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“elementType”：“labels.text.fill”，
“造型师”：[
{
“颜色”：“#6161”
}
]
},
{
“elementType”：“labels.text.stroke”，
“造型师”：[
{
“颜色”：“#F5”
}
]
},
{
“功能类型”：“行政用地”，
“elementType”：“labels.text.fill”，
“造型师”：[
{
“颜色”：“#bdbdbd”
}
]
},
{
“featureType”：“poi”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#eeeeee”
}
]
},
{
“featureType”：“poi”，
“elementType”：“labels.text.fill”，
“造型师”：[
{
“颜色”：“#7575”
}
]
},
{
“功能类型”：“poi.park”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#e5”
}
]
},
{
“功能类型”：“poi.park”，
“elementType”：“labels.text.fill”，
“造型师”：[
{
“颜色”：“#9e9e9e”
}
]
},
{
“功能类型”：“道路”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#ffffff”
}
]
},
{
“功能类型”：“道路干线”，
“elementType”：“labels.text.fill”，
“造型师”：[
{
“颜色”：“#7575”
}
]
},
{
“功能类型”：“道路.公路”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#达达”
}
]
},
{
“功能类型”：“道路.公路”，
“elementType”：“labels.text.fill”，
“造型师”：[
{
“颜色”：“#6161”
}
]
},
{
“功能类型”：“road.local”，
“elementType”：“labels.text.fill”，
“造型师”：[
{
“颜色”：“#9e9e9e”
}
]
},
{
“featureType”：“transit.line”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#e5”
}
]
},
{
“功能类型”：“中转站”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#eeeeee”
}
]
},
{
“功能类型”：“水”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#c9c9c9”
}
]
},
{
“功能类型”：“水”，
“elementType”：“labels.text.fill”，
“造型师”：[
{
“颜色”：“#9e9e9e”
}
]
}
]
};
//创建地图
var map=new google.maps.map（$el[0]，args）；
//添加标记引用
map.markers=[]；
//添加标记
$markers.each（函数（）{
添加_标记（$（此），映射）；
});
//中心地图
中心地图（地图）；
}
/*
*添加标记
*
*此功能将向选定的Google地图添加标记
*
*@type函数
*@date 8/11/2013
*@自4.3.0以来
*
*@param$marker（jQuery元素）
*@param-map（谷歌地图对象）
*@return不适用
*/
函数add_marker（$marker，map）{
//变量
var latlng=new google.maps.latlng（$marker.attr（'data-lat'），$marker.attr（'data-lng'）；
var icon=$marker.attr（'data-img'）；
//创建标记
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
图标：图标，
});
//添加到数组
map.markers.push（marker）；
//如果标记包含HTML，则将其添加到信息窗口
如果（$marker.html（））
{
//创建信息窗口
var infowindow=new google.maps.infowindow({
内容：$marker.html（）
});
//单击标记时显示信息窗口
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
}
/*
*中心地图
*
*此功能将使地图居中，显示附加到此地图的所有标记
*
*@type函数
*@date 8/11/2013
*@自4.3.0以来
*
*@param-map（谷歌地图对象）
*@return不适用
*/
功能中心地图（地图）{
//瓦尔斯
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（7）；
}
其他的
{
//合拍
映射边界（bounds）；
}
}
/*
*文件准备就绪
*
*此函数将在文档准备就绪（页面已加载）时呈现每个地图
*
*@type函数
*@date 8/11/2013
*@自5.0.0以来
*
*@param不适用
*@return不适用
*/
$（文档）.ready（函数（）{
$（'.acf map'）。每个（函数（）{
渲染_贴图（$（此））；
});
});
})（jQuery）；