迁移至AdvancedMarkerElement遇google.maps.marker未定义问题求助

以下是几个排查和解决的方向：

1. 确保代码在地图加载完成后执行 #

你的脚本使用了loading=async和callback=onMapsLoaded，所有涉及Google Maps API的代码（包括创建AdvancedMarkerElement）必须放在onMapsLoaded函数内部，或者确保在该函数执行后才运行。如果标记创建代码在回调外执行，会因API未完全加载导致google.maps.marker未定义。

正确代码结构示例：

function onMapsLoaded() {
  // 初始化地图
  let pos = { lat: -25.344, lng: 131.031 };
  _map = new google.maps.Map(
    $('#dMap')[0], { 
      zoom: 4, 
      center: pos, 
      mapTypeId: google.maps.MapTypeId.SATELLITE, 
      mapId: 'DEMO_MAP_ID' 
    }
  );

  // 创建高级标记
  let marker = new google.maps.marker.AdvancedMarkerElement({
    position: pos,
    map: _map,
    title: 'Some title'
  });
}

2. 指定API版本 #

尝试在script标签中添加API版本参数，拉取包含AdvancedMarkerElement的最新版本：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxx&libraries=places,marker,drawing,geometry&loading=async&callback=onMapsLoaded&v=weekly"></script>

v=weekly会加载每周更新的最新稳定版本，确保组件可用。

3. 验证marker库加载状态 #

打开浏览器开发者工具的网络面板，刷新页面后检查是否有包含marker库的资源请求成功加载。如果加载失败，检查：

• Google Cloud控制台中是否已启用Maps JavaScript API
• API密钥是否有正确的权限配置，未被IP或域名限制

4. 检查控制台错误 #

查看浏览器控制台（F12）是否存在其他错误，比如API密钥无效、mapId配置错误等，这类问题可能间接导致marker库无法正常初始化。

内容的提问来源于stack exchange，提问作者There and That