使用.json文件中的数据填充gmaps信息窗口

// 异步加载.json文件
fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // 解析.json文件为JavaScript对象
    const markersData = data.markers;

    // 创建地图
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 37.7749, lng: -122.4194 },
      zoom: 8
    });

    // 遍历数据对象，创建标记和信息窗口
    markersData.forEach(markerData => {
      const marker = new google.maps.Marker({
        position: { lat: markerData.lat, lng: markerData.lng },
        map: map
      });

      const infoWindow = new google.maps.InfoWindow({
        content: `
          <h3>${markerData.title}</h3>
          <p>${markerData.description}</p>
        `
      });

      // 点击标记时显示信息窗口
      marker.addListener('click', () => {
        infoWindow.open(map, marker);
      });
    });
  })
  .catch(error => {
    console.error('Error:', error);
  });

{
  "markers": [
    {
      "lat": 37.7749,
      "lng": -122.4194,
      "title": "San Francisco",
      "description": "A beautiful city in California."
    },
    {
      "lat": 34.0522,
      "lng": -118.2437,
      "title": "Los Angeles",
      "description": "The largest city in California."
    },
    {
      "lat": 47.6062,
      "lng": -122.3321,
      "title": "Seattle",
      "description": "A major seaport city in the Pacific Northwest."
    }
  ]
}