谷歌地图反应没有出现

Question

我正在尝试使用google-map-react，但是当我尝试渲染它时，什么也没有出现。我错过了什么吗？

import GoogleMap from 'google-map-react';
import React, { Component } from 'react';

class GMaps extends Component {



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

render() {
  return (
   <div>
    <GoogleMap
       style={{width: "100%", height: "500"}}
       defaultCenter={this.props.center}
       defaultZoom={this.props.zoom}
     />
   </div>
  )
} 


}

Answer 1

将高度和宽度分配给容器 div 填充，将解决该问题

<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
   defaultCenter={this.props.center}
   defaultZoom={this.props.zoom}
 />
</div>

如入门中所述： https: //www.npmjs.com/package/google-map-react

Answer 2

请检查您是否正确渲染应用程序。

请参阅此工作示例：Codepen