Google Maps AdvancedMarkerView未定义/非构造函数问题求助

出现Uncaught ReferenceError: AdvancedMarkerView is not defined和Uncaught (in promise) TypeError: AdvancedMarkerView is not a constructor这两个错误，核心原因都是代码无法正确访问到AdvancedMarkerView类，下面是具体排查和解决方法：

1. 确认API加载时包含marker库 #

AdvancedMarkerView属于Google Maps的marker附加库，默认加载Maps API时不会包含这个库，必须在加载URL中明确指定：

<!-- 替换YOUR_API_KEY为你的密钥 -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker"></script>

如果之前的加载URL没有&libraries=marker参数，加上后就能引入AdvancedMarkerView的定义。

2. 确保使用支持AdvancedMarkerView的API版本 #

AdvancedMarkerView是较新的特性，部分稳定版API可能未包含，建议加载预览版本测试：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&v=weekly"></script>

v=weekly会加载每周更新的预览版，确保能用到最新的标记功能。

3. 保证代码在API完全加载后执行 #

如果你的代码在Maps API还没加载完成就运行，会找不到AdvancedMarkerView类，推荐两种方式确保执行时机：

方式一：使用callback参数触发初始化 #

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap"></script>
<script>
function initMap() {
  // 创建地图实例
  const map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 40.7128, lng: -74.0060 },
    zoom: 12
  });

  // 从数组生成标记的示例逻辑
  const markerDataList = [
    { lat: 40.7128, lng: -74.0060, imgUrl: 'your-image-1.png' },
    { lat: 40.7306, lng: -73.9352, imgUrl: 'your-image-2.png' }
  ];

  markerDataList.forEach(data => {
    const marker = new google.maps.marker.AdvancedMarkerView({
      map: map,
      position: { lat: data.lat, lng: data.lng },
      // 用content传入自定义图片的HTML
      content: `<img src="${data.imgUrl}" style="width:36px;height:36px;border:2px solid white;border-radius:50%;">`
    });
  });
}
</script>

方式二：异步导入库（适合模块化代码） #

async function initMap() {
  // 异步导入地图和marker库
  const { Map } = await google.maps.importLibrary('maps');
  const { AdvancedMarkerView } = await google.maps.importLibrary('marker');

  const map = new Map(document.getElementById('map'), {
    center: { lat: 40.7128, lng: -74.0060 },
    zoom: 12
  });

  // 数组生成标记逻辑
  const markerDataList = [
    { lat: 40.7128, lng: -74.0060, imgUrl: 'your-image-1.png' },
    { lat: 40.7306, lng: -73.9352, imgUrl: 'your-image-2.png' }
  ];

  markerDataList.forEach(data => {
    new AdvancedMarkerView({
      map: map,
      position: { lat: data.lat, lng: data.lng },
      content: `<img src="${data.imgUrl}" style="width:36px;height:36px;border:2px solid white;border-radius:50%;">`
    });
  });
}

initMap();

4. 核对AdvancedMarkerView的语法 #

注意新版和旧版Marker的用法差异：

• 旧版用icon参数设置图标，新版AdvancedMarkerView用content传入HTML元素（比如自定义图片的img标签）
• AdvancedMarkerView的构造函数参数中，map属性指定要绑定的地图实例

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