使用Google Maps API导出initMap结果时遇错误的技术求助

问题背景 #

已引入Google Maps API并关联脚本，但在导出initMap（Google Maps要求的初始化函数）时出现控制台错误，地图虽能显示，但存在以下报错：

inicializar.js:1 Uncaught ReferenceError: google is not defined
    at initMap (inicializar.js:1:27)
    at codigo.js:1:52

localhost/:1 Uncaught (in promise) me {message: 'initMap is not a function', stack: 'Error
    at new me (https://maps.googleapis.com/m…ibraries=places,geometry&callback=initMap:313:231', name: 'InvalidValueError'}

js?key=${key}&libraries=places,geometry&callback=initMap:486     GET https://maps.googleapis.com/maps/api/mapsjs/gen_204?csp_test=true net::ERR_BLOCKED_BY_CLIENT

涉及文件代码：

• inicializar.js

export function initMap() {
    return new google.maps.Map(document.getElementById("map"), {
        zoom: 11,
        center: { lat: 40.23238925881008, lng: -100.70052936550995 }
    });
}

• codigo.js

import { initMap } from "./inicializar.js"
const mapita = initMap();

console.log(mapita);

• HTML配置

<script src="/build/js/codigo.js" type="module"></script>
<script src="/build/js/inicializar.js"></script>

<script async
src="https://maps.googleapis.com/maps/api/js?key=${key}&libraries=places,geometry&callback=initMap">
</script>

错误原因分析 #

1. google is not defined：codigo.js作为ES模块会优先加载执行，此时Google Maps API的异步脚本还未加载完成，google全局对象不存在，调用initMap自然报错。
2. initMap is not a function：initMap是ES模块导出的函数，仅在模块作用域内可见，Google Maps API的callback参数需要全局作用域下的函数，因此找不到该方法。
3. ERR_BLOCKED_BY_CLIENT：这是浏览器插件（如广告拦截器）阻止了Google的CSP测试请求，与代码逻辑无关，对功能无影响。

解决步骤 #

方案一：手动等待Google API加载完成（推荐） #

取消Google API的callback参数，在模块内等待API加载完成后再初始化地图：

修改HTML

移除单独引入的inicializar.js（模块已导入），并去掉API的callback：

<script type="module" src="/build/js/codigo.js"></script>

<script async src="https://maps.googleapis.com/maps/api/js?key=${key}&libraries=places,geometry"></script>

修改codigo.js

添加等待逻辑，确保google对象存在后再调用initMap：

import { initMap } from "./inicializar.js";

// 等待Google Maps API加载完成
function waitForGoogle() {
  return new Promise(resolve => {
    if (window.google) {
      resolve();
    } else {
      const checkInterval = setInterval(() => {
        if (window.google) {
          clearInterval(checkInterval);
          resolve();
        }
      }, 100);
    }
  });
}

// 初始化流程
async function initApp() {
  await waitForGoogle();
  const mapita = initMap();
  console.log(mapita);
  // 这里可以添加后续地图操作逻辑
}

initApp();

方案二：将initMap暴露到全局作用域 #

如果需要保留Google API的callback机制，把模块内的initMap挂载到全局：

修改inicializar.js

在导出函数后添加全局暴露代码：

export function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 11,
        center: { lat: 40.23238925881008, lng: -100.70052936550995 }
    });
    // 把地图实例存到全局，方便其他模块调用
    window.mapInstance = map;
    return map;
}

// 暴露到全局作用域，满足Google API的callback要求
window.initMap = initMap;

修改HTML

移除重复的inicializar.js引入：

<script type="module" src="/build/js/codigo.js"></script>

<script async
src="https://maps.googleapis.com/maps/api/js?key=${key}&libraries=places,geometry&callback=initMap">
</script>

修改codigo.js

监听地图初始化完成事件，获取实例：

import { initMap } from "./inicializar.js";

// 监听地图初始化完成事件
window.addEventListener('mapReady', () => {
  console.log(window.mapInstance);
});

// 修改inicializar.js中的initMap，添加事件触发：
/*
export function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 11,
        center: { lat: 40.23238925881008, lng: -100.70052936550995 }
    });
    window.mapInstance = map;
    // 触发初始化完成事件
    window.dispatchEvent(new CustomEvent('mapReady'));
    return map;
}
window.initMap = initMap;
*/

错误重视程度 #

• 前两个错误必须修复：虽然地图暂时能显示，但依赖于脚本加载的偶然性，后续可能出现地图加载失败、功能异常的情况。
• 第三个ERR_BLOCKED_BY_CLIENT错误无需处理，仅影响CSP测试，不影响地图核心功能，若要消除可关闭浏览器的广告拦截类插件。

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