谷歌地图反应没有加载

Question

我的谷歌地图出现以下错误：">哎呀！出了问题。此页面未正确加载谷歌地图。有关技术详细信息，请参阅JavaScript控制台"；我使用盖茨比和谷歌地图反应包。我的代码：

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>

Answer 1

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

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