Google Maps Javascript API，标记和折线的问题不在React.js应用程序上一起显示

我很确定状态和setState的东西是正确的，所以这是我的代码。我在这里所做的就是为地图键分配了功能this.initMap()。要详细查看：

class Radar extends Component{
    constructor(props){
        super(props)
        //initialize methods here
        this.googleMap = React.createRef()

        //define states here
        this.state = {
            cityname:this.props.datasource.name,
            cityCoordinates:[this.props.datasource.coord.lon, this.props.datasource.coord.lat],
            winddirection:this.props.datasource.wind.deg,
            cityPool:[],
            borderLine:[]
        }
}


initMap(){
    return new window.google.maps.Map(this.googleMap.current,{
        zoom: 7.5,
        center:{ lat: this.state.cityCoordinates[1], lng:this.state.cityCoordinates[0] },
      disableDefaultUI: true,
    })
}

targetedCityMarker(){
    new window.google.maps.Marker({
        position: { lat: this.state.cityCoordinates[1], lng:this.state.cityCoordinates[0] },
        map:this.initMap()
    })
}

cityPoolPolyLine(){
    let citypool_coordinates=[]
    this.state.cityPool.map((i)=>{
        citypool_coordinates.push(i.location)
        return citypool_coordinates
    })

    console.log(this.state.borderLine)   
    console.log(citypool_coordinates)    
    new window.google.maps.Polyline({
        path: this.state.borderLine,
        geodesic: true,
        strokeColor: "#2AA181",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map:this.initMap()
      });
}

componentDidMount(){
    axios.get('http://localhost:5000/weather/radar').then((res)=>{
        console.log(res.data)
        this.setState({
            cityPool:res.data
        })
    })

    axios.get('http://localhost:5000/weather/radar_2').then((res)=>{
        this.setState({
            borderLine:res.data
        })
    })

    const MapCode = document.createElement('script')
    MapCode.src =`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&libraries=&v=weekly`
    window.document.body.appendChild(MapCode)
    

    MapCode.addEventListener('load', ()=>{
        this.initMap()
        this.targetedCityMarker()
        setTimeout(()=>{
            this.cityPoolPolyLine()
        },4000)
    })
}
    
    render(){
        return(
            <div className='radar-page'>
                <h1>Weather Radar</h1>
                <p>City Name: {this.state.cityname}</p>
                <p>City Coordinates:Lon: {this.state.cityCoordinates[0]}, Lat: {this.state.cityCoordinates[1]}</p>
                <p>Wind Direction: {this.state.winddirection}˚ </p>
                <p>Selected Cities: * Write a query, setup the range, greater or less than the chosen city's coordinates *</p>
                <div id="google-map" ref={this.googleMap} style={{ width: '500px', height: '400px' }} />
            </div>
        )
    }
}

export default Radar

我使用this.initMap()正确吗？我的直觉告诉我这句话，或者我对OOP的某些困惑正在引起一些麻烦。因此，一旦我运行，它将首先显示没有折线的标记，然后标记消失，但折线显示出来。