在C# ASP.Net中加载Google Maps AdvancedMarkerElement报undefined错误

核心库加载检查 #

• 必须引入marker库：Google Maps高级标记不是核心库默认包含的，你的脚本加载URL必须带上&libraries=marker参数，比如：

  <script async src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=marker&callback=initMap"></script>
  

  注意async和callback的搭配，保证初始化函数initMap在所有库加载完成后才执行。

• 解决时序问题：如果是动态加载脚本或者用了ASP.NET脚本捆绑，容易出现代码先于库执行的情况。可以给初始化逻辑加个检测重试：

  function initMap() {
    if (!window.google?.maps?.marker?.AdvancedMarkerElement) {
      setTimeout(initMap, 100);
      return;
    }
    // 在这里写你的高级标记初始化代码
  }
  

ASP.NET专属排查点 #

• 确认脚本加载顺序：如果Report.cshtml用了布局页，要保证Google Maps的脚本放在页面自定义脚本之前。比如把布局页的@RenderSection("Scripts", required: false)放在Google Maps脚本之后，或者把地图初始化代码写在页面的Scripts区块里。

• 清理缓存：ASP.NET可能会缓存旧资源，按Ctrl+F5强制刷新页面，或者在开发环境禁用浏览器缓存，确保加载的是最新的Google Maps库。

• 验证API权限：去Google Cloud控制台确认你的API密钥已经启用了「Maps JavaScript API」和「Advanced Markers API」，没开启的话库会加载失败。

调试小技巧 #

• 在浏览器控制台输入google.maps.marker，看是否返回有效对象。如果是undefined，说明marker库没加载成功；如果对象存在但没有AdvancedMarkerElement，可以在脚本URL里加&v=weekly指定加载最新版本测试（需要v3.51及以上版本支持高级标记）。
• 查看浏览器网络请求，确认maps/api/js的请求返回200状态码，且响应内容里包含AdvancedMarkerElement相关代码。

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