Я пытаюсь создать приложение карты с помощью реагировать и карты Google, мне удается создать компонент карты Google и использовать карту, однако, когда добавлен компонент навигационной панели, я не могу найти способ отрегулировать высоту карты в пространство, оставшееся без полосы прокрутки.
Компонент Navbar взят из bootstrap, я не знаю, имеет ли это значение.
КОМПОНЕНТ КАРТЫ
import React from 'react';
import { GoogleMap, withScriptjs, withGoogleMap } from 'react-google-maps';
const INIT_VALUES = {
initialZoom: 10,
center: { lat: -27.593500, lng: -48.558540 },
};
function Map() {
return (
<GoogleMap
defaultCenter={INIT_VALUES.center}
defaultZoom={INIT_VALUES.initialZoom}
/>
);
}
const WrappedMap = withScriptjs(withGoogleMap(Map));
export default WrappedMap;
Компонент приложения
import React, { useEffect } from 'react';
import MapNavbar from './components/navbar/index';
import WrappedMap from './components/map/index';
import './App.css';
const MAP_KEY = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=******';
const mapStyles = {
width: '100%',
height: '100vh',
};
async function fetchData(callback) {
const response = await fetch('http://localhost:5000/');
const data = await response.json();
callback(data);
}
function App() {
useEffect(() => {
fetchData((a) => console.log(a));
}, []);
return (
<div className="App">
<MapNavbar />
<div style={mapStyles}>
<WrappedMap
googleMapURL={MAP_KEY}
loadingElement={<div style={{ height: '100%' }} />}
containerElement={<div style={{ height: '100%' }} />}
mapElement={<div style={{ height: '100%' }} />}
/>
</div>
</div>
);
}
export default App;