WordPress发布页面出现Google Maps API的Init map is not a function错误

核心问题分析 #

发布环境与草稿环境的差异通常在于资源加载策略、代码压缩/优化或缓存机制，导致地图初始化代码在Google Maps API资源完全加载前执行，引发google is not defined类错误。

可行解决方法 #

1. 强制检查API加载状态后初始化 #

通过轮询检查window.google的存在性，确保API加载完成后再执行地图代码：

function initMap() {
  // 检查Google Maps API是否已加载完成
  if (typeof window.google === 'undefined' || !window.google.maps) {
    setTimeout(initMap, 100); // 间隔100ms重试
    return;
  }

  // 地图初始化与绘制工具代码
  const map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });

  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    }
  });
  drawingManager.setMap(map);
}

// 页面DOM加载完成后启动检查
document.addEventListener('DOMContentLoaded', initMap);

2. 动态加载API脚本，完全控制执行时机 #

手动创建脚本标签加载API，通过Promise确保加载完成后再初始化地图：

function loadGoogleMapsAPI() {
  return new Promise((resolve, reject) => {
    // 若API已加载直接返回
    if (window.google && window.google.maps) {
      resolve(window.google.maps);
      return;
    }

    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing';
    script.onload = () => resolve(window.google.maps);
    script.onerror = (err) => reject(err);
    document.body.appendChild(script);
  });
}

// 调用加载函数并初始化地图
loadGoogleMapsAPI().then((maps) => {
  const map = new maps.Map(document.getElementById('map'), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });

  const drawingManager = new maps.drawing.DrawingManager({
    drawingMode: maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: maps.ControlPosition.TOP_CENTER,
      drawingModes: [maps.drawing.OverlayType.POLYGON]
    }
  });
  drawingManager.setMap(map);
}).catch((err) => {
  console.error('Google Maps API加载失败:', err);
});

3. 排查发布环境的资源加载配置 #

• 检查API脚本标签的async/defer属性：发布环境可能自动添加这些属性导致脚本异步加载，需确保初始化代码绑定到API的onload事件：

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing" async defer onload="initMap()"></script>
  

• 检查代码压缩/Tree Shaking：发布环境的优化可能误删初始化函数或变量，可在浏览器控制台打印window.google确认API是否加载，查看具体报错信息定位。
• 清除缓存：强制刷新浏览器（Ctrl+F5）或在API URL后添加版本参数（如&v=3.54），避免加载旧的缓存资源。

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