Реактив не хочу отображать компонент Карты

Question

Попытка освоить React и интегрировать Google Maps API для JS.В App.jsx у меня есть Маршрутизация:

<Router>
    <Switch>
      <Route exact path="/" component={LandingPage} layout={LandingLayout} />
    </Switch>
</Router>

В LandingLayout у меня есть реализация боковой панели от Semantic UI, потому что я хочу показать боковую панель везде, так что это мой макет.В компоненте LandingPage у меня есть следующие строки кода:

return <MapContainer />;

А в MapContainer у меня есть скопированный код из документации Google Maps React: DOCS

Боковая панель загружена и все в порядке, но карты Google не хотят отображать, и я понятия не имею, почему ..

Answer 1

Без просмотра вашего кода, я думаю, что, вероятно, просто размер MapContainer не определен, как другие, упомянутые в комментариях.Если это другая проблема, пожалуйста, покажите больше кода.

Я бы добавил div обертки вокруг компонента MapContainer со стилем width: 100%; height:100%;.В демонстрации я также добавил стиль к html,body, чтобы сделать его полным размером страницы (см. styles.css).

Это должно работать как в следующем Codesandbox .(Карта не загружается в изолированную программную среду, поскольку ключ API неверен.)