Google Maps API报错：google.maps.Map is not a constructor 求助

先修复加载脚本的参数问题 #

你的Google Maps加载脚本重复声明了libraries参数，HTTP参数重复可能导致资源解析异常：
原加载代码：

<script src="https://maps.googleapis.com/maps/api/js?key=XXXX&loading=async&libraries=places&language=XXXX&libraries=marker"></script>

合并重复的libraries参数：

<script src="https://maps.googleapis.com/maps/api/js?key=XXXX&loading=async&libraries=places,marker&language=XXXX"></script>

确保初始化时机正确 #

使用loading=async时，initMap可能在Maps脚本未完全加载前触发，建议明确指定回调参数，强制脚本加载完成后再执行初始化：

<script src="https://maps.googleapis.com/maps/api/js?key=XXXX&loading=async&libraries=places,marker&language=XXXX&callback=initMap"></script>

同时移除页面中手动调用initMap的代码，避免触发时机冲突。

排查缓存问题 #

即使生产环境是旧代码，CDN或浏览器缓存可能加载了损坏的Maps资源：

• 给加载脚本添加版本参数，比如&v=20240520，强制浏览器加载新资源
• 联系运维清除CDN缓存（如果使用了CDN服务）

检查全局变量冲突 #

确认页面中没有其他脚本覆盖google全局对象，在initMap开头添加调试代码：

function initMap() {
    console.log('google object:', google);
    // 原有初始化代码...
}

如果输出的google不是Maps官方对象，说明有第三方脚本篡改了命名空间，排查页面中的广告、统计类工具脚本。

验证Map ID和API权限 #

• 登录Google Cloud控制台，确认mapId: 'Customers'已正确创建并关联当前API密钥
• 检查API密钥是否启用了Maps JavaScript API、Places API、Marker Library，避免权限被意外关闭

测试最简初始化代码 #

暂时替换initMap为最简版本，排除业务代码干扰：

function initMap() {
    try {
        const map = new google.maps.Map(document.getElementById('map'), {
            zoom: 3,
            center: { lat: 10, lng: 10 }
        });
        console.log('Map initialized successfully');
    } catch (e) {
        console.error('Init error:', e);
    }
}

如果最简代码能运行，再逐步加回业务代码排查问题点。

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