谷歌地图反应没有加载答案

【问题标题】：google-map-react not loading谷歌地图反应没有加载
【发布时间】：2021-01-20 08:18:00
【问题描述】：

我的谷歌地图出现以下错误： “糟糕！出了点问题。此页面未正确加载 Google 地图。有关技术详情，请参阅 JavaScript 控制台。” 我使用 Gatsby 和 google-map-react 包。我的代码：

const AnyReactComponent = ({ text }) => <div>{text}</div>;

static defaultProps = {
    center: {
        lat: 59.95,
        lng: 30.33
    },
    zoom: 11
};

<div style={{ height: '50vh', width: '100%' }}>
    <GoogleMapReact
        bootstrapURLKeys={{ key: "https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed" }}
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
    >
        <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text="My Marker"
        />
    </GoogleMapReact>
</div>

【问题讨论】：

标签： javascript reactjs google-maps gatsby

【解决方案1】：

在 bootstrapURLKeys 中，您必须添加 google map api key 而不是 url。你可以从谷歌控制台https://developers.google.com/maps/documentation/javascript/get-api-key获取密钥

 <GoogleMapReact
    bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
    ......
  />

【讨论】：