如何在项目中添加多个Google地图？单个正常，新增地图失效

我太懂这种单地图正常、多地图罢工的憋屈了！这在Google Maps开发里是个超常见的小坑，大多是重复DOM ID、变量冲突或者初始化逻辑没理顺导致的，我给你一步步拆解解决方案：

第一步：给每个地图分配唯一的DOM ID #

首先得确保每个地图容器都有独一无二的ID，不能全用map：

<!-- 第一个地图容器 -->
<div class="map" id="map1"></div>
<!-- 第二个地图容器 -->
<div class="map" id="map2"></div>
<!-- 第三个地图容器 -->
<div class="map" id="map3"></div>

重要提醒：别忘了给.map容器设置宽高样式！空容器会直接导致地图看不见

.map {
  width: 100%;
  height: 400px;
  margin: 20px 0;
}

第二步：重构初始化逻辑，避免变量冲突 #

你之前的代码里map和marker都是全局变量，多地图时会被后面的实例覆盖。我们可以在initMap里分别初始化每个地图，给每个实例单独命名：

function initMap() {
  // 初始化第一个地图（Uluru坐标）
  const uluru = {lat: 54.5973, lng: -5.9301};
  const map1 = new google.maps.Map(document.getElementById('map1'), {
    zoom: 4,
    center: uluru
  });
  new google.maps.Marker({
    position: uluru,
    map: map1
  });

  // 初始化第二个地图（示例：纽约坐标）
  const newYork = {lat: 40.7128, lng: -74.0060};
  const map2 = new google.maps.Map(document.getElementById('map2'), {
    zoom: 10,
    center: newYork
  });
  new google.maps.Marker({
    position: newYork,
    map: map2
  });

  // 初始化第三个地图（示例：东京坐标）
  const tokyo = {lat: 35.6762, lng: 139.6503};
  const map3 = new google.maps.Map(document.getElementById('map3'), {
    zoom: 10,
    center: tokyo
  });
  new google.maps.Marker({
    position: tokyo,
    map: map3
  });
}

第三步：确认API加载的正确性 #

确保加载Google Maps API的脚本标签里，callback参数指向你的initMap函数，且没有重复加载API：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

记得把YOUR_API_KEY换成你自己的有效API密钥哦

额外排查小技巧 #

• 按F12打开浏览器控制台，看看有没有报错：如果出现Cannot read property 'Map' of undefined，大概率是API没加载成功或密钥无效
• 检查每个地图容器的宽高是否生效，浏览器元素审查里能直接看到
• 绝对不要重复用同一个变量名存地图实例，否则后面的会直接覆盖前面的

这样调整后，三个地图应该就能正常显示啦！

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