Google-Maps-Reactect地图未显示

Question

我正在使用一个我想显示带有标记的Google地图的应用程序。我以为我正确地遵循了Google-Maps-Reaction文档上的步骤，但是我有问题。

首先，地图显示灰色，没有土地/海洋显示。

其次，地图似乎脱离了屏幕，但我的浏览器没有滚动，因此我看不到地图的其余部分。我假设这与样式有关，但我无法弄清楚。

这是浏览器的屏幕截图以供参考：

我的地图组件：

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

const mapStyles = {
  width: '100%',
  height: '90%',
};

export class MapContainer extends Component {
    state = {
        showingInfoWindow: false,  // Hides or shows the InfoWindow
        activeMarker: {},          // Shows the active marker upon click
        selectedPlace: {}          // Shows the InfoWindow to the selected place upon a marker
    };
    render() {
        const {google, location} = this.props;

        return (
            <Map
                google={this.props.google}
                zoom={5}
                style={mapStyles}
                initialCenter={{
                    lat: location.latitude,
                    lng: location.longitude
                }}
                center={{
                    lat: location.latitude,
                    lng: location.longitude
                }}
            >
                <Marker
                    name={'ISS'}
                    position={{
                        lat: location.latitude,
                        lng: location.longitude
                    }}
                    icon={{
                        url: 'https://icons.iconarchive.com/icons/goodstuff-no-nonsense/free-space/512/international-space-station-icon.png',
                        anchor: new google.maps.Point(32,32),
                        scaledSize: new google.maps.Size(80,80)
                    }} 
                />
            </Map>
        );
    }
}

export default GoogleApiWrapper({
    apiKey:process.env.REACT_APP_API_KEY
})(MapContainer);

任何帮助将不胜感激

Answer 1

实际上，我可以通过添加样式来解决问题：“溢出：可见”为我的地图组件。我不确定为什么这是一个问题或为什么它默认要隐藏，因此，如果有人对此有洞察力，那将是有帮助的。但这解决了我遇到的两个问题。