Javascript 反应谷歌地图灰盒渲染

我正在尝试让谷歌地图在react组件中渲染。它确实渲染了一个灰色的框，当我在尝试平移时收到消息“使用两个手指移动地图”时，有些东西正在工作。只是地图本身没有显示出来

在Map.css文件中，我只设置了.Map和.Map画布的宽度和高度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>

        )
    }

}

import*as React from'React'；
从“反应加载脚本”导入脚本；
导入“./Map.css”；
接口映射容器状态{
脚本错误：布尔值
}
导出默认类MapContainer扩展React.Component{
私有mapCanvas:htmldevelment | null；
私有地图：google.maps.map |空；
构造函数（props:{}）{
超级（道具）
此.state={
脚本错误：false
}
this.maploaderro=this.maploaderro.bind（this）；
this.loadMap=this.loadMap.bind（this）；
}
mapLoadError（）{
这是我的国家({
脚本错误：true
})
}
loadMap（）{
常量映射选项={
中心：{
lat:-25.363，
液化天然气：131.044
},
首字母缩放：4，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
this.map=新建google.maps.map（this.mapCanvas，mapOptions）
}
render（）{
常量url=https://maps.googleapis.com/maps/api/js?key=[我的钥匙]'
返回(
this.mapCanvas=ref}className=“mapCanvas”>
)
}
}

您搜索了吗？我搜索了。这些都帮不了我你找了吗？我找了。这些都帮不了我。