如何向我的angular google地图添加总览折线

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

<div id="map"></div>

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
  @ViewChild('mapContainer', { static: false }) mapContainer: ElementRef;

  map: google.maps.Map;

  ngAfterViewInit() {
    const mapOptions: google.maps.MapOptions = {
      center: { lat: 37.7749, lng: -122.4194 }, // 设置地图中心点的经纬度
      zoom: 12, // 设置地图缩放级别
    };

    this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
  }
}

const overviewPathCoordinates = [
  { lat: 37.7749, lng: -122.4194 }, // 折线起点的经纬度
  { lat: 37.7749, lng: -122.4316 }, // 折线终点的经纬度
  // 添加更多的经纬度点...
];

const overviewPolyline = new google.maps.Polyline({
  path: overviewPathCoordinates,
  geodesic: true,
  strokeColor: '#FF0000', // 折线颜色
  strokeOpacity: 1.0, // 折线透明度
  strokeWeight: 2 // 折线宽度
});

overviewPolyline.setMap(this.map);