Nuxt3中@googlemaps/js-api-loader加载AdvancedMarkerElement不显示问题

DevOps 小满

2026-7-19

解决Nuxt3中Google Maps AdvancedMarkerElement不显示及加载警告问题

1. 消除"Google Maps already loaded outside @googlemaps/js-api-loader"警告

该警告源于Google Maps脚本被重复加载，按以下方式处理：

检查nuxt.config.ts，移除app.head.scripts中手动引入的Google Maps <script>标签
排查第三方插件/模块，确保没有自动引入Google Maps API
配置Loader时明确指定版本、依赖库，并启用异步加载：

const loader = new Loader({
  apiKey: '你的API_KEY',
  version: 'weekly',
  libraries: ['marker'], // AdvancedMarkerElement依赖marker库
  async: true,
  defer: true
});

2. 修复AdvancedMarkerElement不显示问题

标记不显示多因API未加载完成或初始化逻辑错误，按以下步骤调整：

等待API加载完成后再初始化地图和标记，借助loader.load()的Promise：

async function initMap() {
  await loader.load();
  
  const { Map } = google.maps;
  const { AdvancedMarkerElement } = google.maps.marker;

  // 初始化地图
  const map = new Map(document.getElementById('map'), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8
  });

  // 创建自定义HTML标记
  const marker = new AdvancedMarkerElement({
    map: map,
    position: { lat: -34.397, lng: 150.644 },
    content: `<div style="padding:8px;background:#fff;border-radius:4px;border:1px solid #666;">自定义标记</div>`
  });
}

在Nuxt3的onMounted钩子中触发初始化，确保DOM元素已挂载，且仅在客户端执行（适配SSR）：

<script setup>
import { onMounted } from 'vue';
import { Loader } from '@googlemaps/js-api-loader';

const loader = new Loader({
  apiKey: '你的API_KEY',
  version: 'weekly',
  libraries: ['marker']
});

onMounted(async () => {
  if (process.client) {
    await initMap();
  }
});

async function initMap() {
  // 上述初始化逻辑
}
</script>

<template>
  <div id="map" style="width:100%;height:400px;"></div>
</template>