谷歌地图多标记与信息窗口在angular 7

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

ng generate component map

ngOnInit() {
  const mapProperties = {
    center: new google.maps.LatLng(37.7749, -122.4194), // 地图中心点的经纬度
    zoom: 10, // 初始缩放级别
    mapTypeId: google.maps.MapTypeId.ROADMAP // 地图类型
  };
  this.map = new google.maps.Map(this.mapElement.nativeElement, mapProperties);
}

ngOnInit() {
  // 先创建地图
  // ...

  const markers = [
    { lat: 37.7749, lng: -122.4194, title: 'Marker 1' },
    { lat: 37.3382, lng: -121.8863, title: 'Marker 2' },
    { lat: 34.0522, lng: -118.2437, title: 'Marker 3' }
  ];

  markers.forEach(markerInfo => {
    const marker = new google.maps.Marker({
      position: new google.maps.LatLng(markerInfo.lat, markerInfo.lng),
      map: this.map,
      title: markerInfo.title
    });
  });
}

markers.forEach(markerInfo => {
  const marker = new google.maps.Marker({
    position: new google.maps.LatLng(markerInfo.lat, markerInfo.lng),
    map: this.map,
    title: markerInfo.title
  });

  const infoWindow = new google.maps.InfoWindow({
    content: markerInfo.title
  });

  marker.addListener('click', () => {
    infoWindow.open(this.map, marker);
  });
});