reactjs - Google Maps API | Map present but not displayed | Explicit height is set

Question

ENVIRONMENT:

1. google-map-react package
2. no errors in console or network tabs
3. mac
4. VSCode

TROUBLESHOOTING STEPS:

1. explicitly set height
2. verified child Map components are present as seen in the inspector image
3. verified and receiving no errors regarding API Key
4. verified styles linked & applied correctly
5. behavior consistent across FF and Chrome

RESULT: blank screen

FAQ's and docs indicate a defined height being the most common error, which is addressed. What other areas should I be troubleshooting? Thanks.

* EDITED TO ADD CODE *

(thanks @MrUpsideDown for pointing this out)

[index.js]

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './styles/Map.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

[App.js]

import Map from './Map';

function App() {
  return (
    <div>
      <Map />
    </div>
  );
}

export default App;

[Map.js]

import GoogleMapReact from 'google-map-react';

const Map = ({ center, zoom }) => {
  return (
    <div id='Map'>
      <GoogleMapReact
        bootstrapURLKeys={{
          key: MAPS_API_KEY,
        }}
        defaultCenter={center}
        defaultZoom={zoom}
      ></GoogleMapReact>
    </div>
  );
};

[Map.css]

#Map {
  height: 100vh;
  width: auto;
  position: relative;
  /* background: red; */
}

question from:https://stackoverflow.com/questions/65940895/google-maps-api-map-present-but-not-displayed-explicit-height-is-set

Answer 1

Waitting for answers