Vue3中onMount()加载Google Maps API时出现TypeError错误

错误原因 #

该错误是由于全局google对象未被正确挂载，或是Loader加载完成后未正确获取到Google Maps API的实例对象，直接访问google.maps导致抛出未定义异常。

解决方案 #

1. 正确初始化Loader实例
   确保在组件中创建Loader实例时配置有效的API密钥及必要参数：

   import { Loader } from '@googlemaps/js-api-loader'
   
   // 初始化Loader，替换为你的API密钥
   const loader = new Loader({
     apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
     version: 'weekly', // 指定API版本，可选
     libraries: [] // 按需添加需要的库，如['places']
   })
   

2. 通过Loader返回值获取Google实例
   修改onMounted中的代码，直接使用loader.load()返回的google对象，而非依赖全局变量：

   onMounted(async () => {
     // 加载API并获取google实例
     const google = await loader.load()
     // 初始化地图
     new google.maps.Map(mapDiv.value, {
       center: currPos.value,
       zoom: 14
     })
   })
   

3. 排查其他潜在问题

   • 确认API密钥已启用Maps JavaScript API，且无错误的IP/Referrer限制
   • 避免在父组件和子组件中重复初始化Loader实例，防止加载冲突
   • 验证mapDiv.value是有效的DOM元素（可通过console.log确认是否为null）

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