Google Maps JS API中PinElement未定义：如何正确加载该组件？

• 正确从marker库导入PinElement
  你必须在google.maps.importLibrary('marker')返回的对象中，同时解构出AdvancedMarkerElement和PinElement，不能直接全局调用PinElement。示例代码：

  async function initMap() {
    // 同步加载marker库并获取所需类
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary('marker');
    
    // 创建带缩放效果的PinElement
    const scaledPin = new PinElement({
      scale: 1.8, // 设置缩放比例
      background: '#2ECC71'
    });
    
    // 将PinElement的element属性作为内容传入AdvancedMarkerElement
    const marker = new AdvancedMarkerElement({
      position: { lat: 34.0522, lng: -118.2437 },
      map: map,
      content: scaledPin.element
    });
  }
  

• 常见错误排查

  • 不要跳过await直接调用importLibrary，必须等库加载完成再使用类
  • 确保所有创建PinElement的代码都在initMap这类异步回调函数内部，不能在全局作用域直接执行
  • 检查是否拼写错误，PinElement的大小写必须严格匹配

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