如何为Google Maps多个Marker添加点击触发的Info Window？

我的项目里Google Maps上有5个Marker，想实现点击每个Marker时弹出带图片和文本的Info Window，参考了官方文档但没法整合到现有代码里，现有代码如下：

原HTML代码 #

<body>
 <section class="map-box" id="map-box" >
      <h2 class="map-title">Where we are</h2>
      <div id="map">
      </div>
    </section>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMjHKMIiZiqHCrcIOe-iH9MtiZ-FpdefA&callback=initMap"></script>
  </body>

原CSS代码 #

#map {
  height: 350px;
  width: 80%; 
  margin: 3rem auto 3rem auto;
}

.map-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map-title {
  font-size: 2rem;
  margin-top: 1.2rem;
}

原JavaScript代码 #

var locations = [
  ["Produkti 24", 55.807486804134314, 37.57894602052835],
  ["TZ Taganka", 55.74093035131738, 37.65759916946915],
  ["TZ Olympic Plaza", 55.780406091354706, 37.63186787199648],
  ["TZ Nautilyus", 55.75928138001903, 37.624754384813336],
  ["TZ Korabl", 55.71020266934412, 37.62031372713951],
];

function initMap() {
  var myLatLng = { lat: 55.7637079, lng: 37.6236902 };

  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: myLatLng,
  });

  var count;

  for (count = 0; count < locations.length; count++) {
    new google.maps.Marker({
      position: new google.maps.LatLng(
        locations[count][1],
        locations[count][2]
      ),
      map: map,
      title: locations[count][0],
    });
  }
}

解决方案 #

要实现点击Marker弹出带图片和文本的信息窗口，核心是给每个Marker绑定点击事件，并复用一个InfoWindow来加载对应内容，具体修改如下：

1. 更新locations数组，补充描述和图片信息 #

原数组仅包含名称和坐标，我们需要添加额外字段存储每个地点的文本描述和图片URL（替换示例URL为你实际的图片地址）：

var locations = [
  ["Produkti 24", 55.807486804134314, 37.57894602052835, "24小时营业的便民超市，提供各类日常商品", "https://example.com/produkti24.jpg"],
  ["TZ Taganka", 55.74093035131738, 37.65759916946915, "位于Taganka区域的休闲中心，配套餐饮和娱乐设施", "https://example.com/tz-taganka.jpg"],
  ["TZ Olympic Plaza", 55.780406091354706, 37.63186787199648, "紧邻奥运场馆的商业广场，适合购物和聚餐", "https://example.com/tz-olympic.jpg"],
  ["TZ Nautilyus", 55.75928138001903, 37.624754384813336, "主打海洋主题的购物中心，拥有特色水族馆", "https://example.com/tz-nautilyus.jpg"],
  ["TZ Korabl", 55.71020266934412, 37.62031372713951, "靠近港口的综合性商场，提供海景餐饮区", "https://example.com/tz-korabl.jpg"],
];

2. 修改initMap函数，添加InfoWindow和点击事件 #

创建一个可复用的InfoWindow实例，在循环创建Marker时绑定点击事件，触发时填充对应内容并打开弹窗：

function initMap() {
  var myLatLng = { lat: 55.7637079, lng: 37.6236902 };

  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: myLatLng,
  });

  // 创建一个复用的InfoWindow，避免重复创建实例
  var infoWindow = new google.maps.InfoWindow();

  var count;
  for (count = 0; count < locations.length; count++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0],
    });

    // 使用闭包保存循环变量，确保点击时获取正确的Marker数据
    marker.addListener('click', (function(marker, count) {
      return function() {
        // 拼接自定义HTML内容：图片+标题+描述
        var content = `
          <div style="width: 220px;">
            <img src="${locations[count][4]}" alt="${locations[count][0]}" style="width: 100%; height: 140px; object-fit: cover; border-radius: 6px; margin-bottom: 8px;">
            <h3 style="margin: 0 0 6px; font-size: 1.1rem;">${locations[count][0]}</h3>
            <p style="margin: 0; font-size: 0.9rem; color: #444; line-height: 1.4;">${locations[count][3]}</p>
          </div>
        `;
        infoWindow.setContent(content);
        infoWindow.open(map, marker);
      }
    })(marker, count));
  }
}

关键细节说明 #

• 复用InfoWindow：只创建一个InfoWindow实例，每次点击时更新内容，避免页面同时存在多个弹窗，提升性能和交互体验。
• 闭包处理循环变量：JavaScript循环的异步特性会导致直接引用count时获取到的是循环结束后的值，用立即执行函数包裹可以保存每个循环的count和marker，确保点击对应Marker时加载正确的数据。
• 自定义样式：通过HTML字符串拼接可以灵活调整弹窗的布局和样式，你可以根据需求修改图片尺寸、字体、间距等CSS样式。

CSS和HTML部分保持原代码即可正常运行。

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