Javascript @react谷歌地图/api'；s Autocomplete给我的是；此页面无法正确加载谷歌地图“；

我正在使用谷歌地图，我正试图让自动完成工作

当我尝试搜索一个位置时，我得到“这个页面无法正确加载谷歌地图”。 他们网站上的例子也有同样的错误。

从“React”导入React
从'@react google maps/api'导入{GoogleMap，LoadScript，Autocomplete}；
const api=process.env.REACT\u APP\u GOOGLE\u MAPS\u api\u KEY；
常量集装箱样式={
宽度：“1200px”，
高度：“500px”
};
常数中心={
lat:-3.745，
液化天然气：-38.523
};
常量Gmap=（）=>{
返回(
{/*子组件，如标记、信息窗口等。*/}
在代码沙盒中

解决方案（感谢@MrUpsidown）：

@MrUpsidown评论说，我的API密钥设置错误。我在控制台中获取并激活了API文件。我必须在项目中启用
Places API

使用有效的API密钥。我使用的是有效的API密钥。我在CodeSandBox和StackOverflow上删除了它，因为我不想共享它。如果它不起作用，你怎么知道它是有效的？我打开了你的沙盒并插入了有效的API密钥，它工作正常。查看JS控制台了解详细信息，确保该密钥有效，并且适当的API已经存在e已在您的谷歌控制台中启用。
import React from 'react'
import { GoogleMap, LoadScript, Autocomplete  } from '@react-google-maps/api';

const api = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;

const containerStyle = {
    width: '1200px',
    height: '500px'
};

const center = {
    lat: -3.745,
    lng: -38.523
};

const Gmap = () => {

    return (
        <LoadScript
            googleMapsApiKey ={api}
            libraries={["places"]}
        >
            <GoogleMap
                mapContainerStyle={containerStyle}
                center={center}
                zoom={10}
            >
                { /* Child components, such as markers, info windows, etc. */ }
                <Autocomplete>
                    <input
                        type="text"
                        placeholder="Input"
                        style={{
                            boxSizing: `border-box`,
                            border: `1px solid transparent`,
                            width: `240px`,
                            height: `32px`,
                            padding: `0 12px`,
                            borderRadius: `3px`,
                            boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                            fontSize: `14px`,
                            outline: `none`,
                            textOverflow: `ellipses`,
                            position: "absolute",
                            left: "50%",
                            marginLeft: "-120px",
                            top: "2%"
                        }}
                    />
                </Autocomplete>
                <></>
            </GoogleMap>
        </LoadScript>
    )
}

export default React.memo(Gmap)