多地图场景下仅最后一个Google Map显示标记的技术求助

这个问题我之前也碰到过，核心原因是你在循环中重复加载了Google Maps API脚本，而且每次加载都指定了不同的callback函数。Google Maps API脚本只能被初始化一次，后续重复加载的脚本不会重新执行，最后一个指定的callback会覆盖之前所有的，这就导致只有最后一家餐厅的地图初始化函数被调用，前面的地图容器虽然渲染出来了，但对应的标记逻辑根本没跑起来。

另外还有个小细节：你当前的代码里没有对餐厅名称做转义处理，如果名称里包含引号、反斜杠这类特殊字符，会直接导致JS语法错误，这点也需要注意。

修复后的代码示例 #

第一步：循环渲染地图容器与初始化函数（不加载API） #

把原来循环里的API加载脚本去掉，只保留地图容器和初始化逻辑，同时将每个地图的初始化函数存入全局数组：

<?php foreach ($restaurants as $restaurant): ?>
    <!-- 餐厅地图容器 -->
    <div id="googleMap<?php echo $restaurant['id'] ?>" style="width:100%;height:200px;"></div>
    <script>
        // 初始化全局数组，用于存储所有地图的初始化函数
        window.mapInitFunctions = window.mapInitFunctions || [];
        
        // 将当前餐厅的地图初始化逻辑加入数组
        mapInitFunctions.push(function() {
            // 地图基础配置
            const mapProps = {
                center: new google.maps.LatLng(<?php echo $restaurant['latitud'] ?>, <?php echo $restaurant['longitud'] ?>),
                zoom: 15, // 建议调大缩放级别，默认5太宽看不到标记
            };
            
            // 创建地图实例
            const map = new google.maps.Map(
                document.getElementById(`googleMap${<?php echo $restaurant['id'] ?>}`),
                mapProps
            );
            
            // 创建并添加标记
            const marker = new google.maps.Marker({
                position: { lat: <?php echo $restaurant['latitud'] ?>, lng: <?php echo $restaurant['longitud'] ?> },
                map: map,
                title: '<?php echo addslashes($restaurant['nombre']) ?>' // 转义特殊字符避免JS语法错误
            });
        });
    </script>
<?php endforeach; ?>

第二步：统一加载Google Maps API，批量初始化所有地图 #

在所有餐厅地图代码的最后，只加载一次API脚本，指定一个统一的回调函数来执行所有地图的初始化：

<!-- 只加载一次Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initAllMaps"></script>

<script>
    // 统一初始化所有地图的回调函数
    function initAllMaps() {
        // 遍历执行所有地图的初始化逻辑
        window.mapInitFunctions.forEach(initFunc => initFunc());
    }
</script>

关键优化点说明 #

1. 避免重复加载API：Google Maps API仅需加载一次，重复加载不仅无效，还会导致回调冲突。
2. 全局数组管理初始化函数：把每个地图的初始化逻辑存入全局数组，在API加载完成后批量执行，确保所有地图都能被正确初始化。
3. 特殊字符转义：用addslashes处理餐厅名称，防止引号等字符破坏JS语法结构。
4. 调整缩放级别：把zoom从5改为15，让标记在地图上更显眼，用户打开就能看到餐厅位置。

内容的提问来源于stack exchange，提问作者mvasco