反映谷歌地图灰色框呈现

Question

我正在尝试将谷歌地图渲染到反应组件中。它确实渲染了一个灰色框，当我尝试平移时，我正在收到消息“使用两个手指移动地图”。这只是地图本身没有出现。

在Map.css文件中，我只设置了.map和.mapCanvas的宽度和高度100％。我觉得问题可能与CSS有关。

有什么想法吗？

这是我的代码。

import * as React from 'react';
import Script from 'react-load-script';

import './Map.css';

interface MapContainerState {
    scriptError: boolean
}

export default class MapContainer extends React.Component<{}, MapContainerState> {


    private mapCanvas: HTMLDivElement | null;
    private map: google.maps.Map | null;

    constructor(props: {}) {
        super(props)

        this.state = {
            scriptError: false
        }

        this.mapLoadError = this.mapLoadError.bind(this);
        this.loadMap = this.loadMap.bind(this);
    }


    mapLoadError() {
        this.setState({
            scriptError: true
        })
    }


    loadMap() {
        const mapOptions = {
            center: {
                lat: -25.363,
                lng: 131.044
            },
            initialZoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        this.map = new google.maps.Map(this.mapCanvas, mapOptions)
    }



    render() {
        const url = 'https://maps.googleapis.com/maps/api/js?key=[MyKey]'
        return (
            <div className="map">
                <Script 
                    url={url}
                    onError={this.mapLoadError}
                    onLoad={this.loadMap}
                />
                <div ref={ref => this.mapCanvas = ref} className="mapCanvas"></div>
            </div>

        )
    }

}