Map not loading (blank screen)

[HsuTimothy]

I realize this question has popped up before but none of the solutions mentioned in those issues seem to have resolved mine.

I've literally copied and pasted the example code from https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/#the-map-container-component (changing the api key of course) but still can't get the simple maps to load.

import React, { Component } from "react";
import { GoogleApiWrapper } from 'google-maps-react';
import Map from "./Map/index";

export class MapContainer extends Component {
  render() {
    const style = { width: "100vw", height: "100vh" };
    return (
      <div style={style}>
        <Map google={this.props.google} />
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "MY_API_KEY"
})(MapContainer);

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Map extends Component {
  componentDidMount() {
    this.loadMap();
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.google !== this.props.google) {
      this.loadMap();
    }
  }

  loadMap() {
    if (this.props && this.props.google) {
      // google is available
      const { google } = this.props;
      const maps = google.maps;

      const mapRef = this.refs.map;
      const node = ReactDOM.findDOMNode(mapRef);

      let zoom = 14;
      let lat = 37.774929;
      let lng = -122.419416;
      const center = new maps.LatLng(lat, lng);
      const mapConfig = Object.assign({}, {
        center: center,
        zoom: zoom
      })
      this.map = new maps.Map(node, mapConfig);
    }
    // ...
  }

  render() {
    return <div ref="map">Loading map...</div>;
  }
}

export default Map;

Would greatly appreciate any tips!

[Bytegardener]

Hi Timothy,
How did you fix the problem?
I am having the same issue (I do not have my own Map file, I am simply importing from "Google-Maps-React"

[HsuTimothy]

@Bytegardener I decided to just use the already available Map component

import { Map } from 'Google-Maps-React' and use it the way it's been shown in the examples

[Bytegardener]

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

export class MapContainer extends Component {
render() {
const style = {
width: "100vw",
height: "100vh",
};
return (
<Map
google={this.props.google}
initialCenter={{
lat: 40.854885,
lng: -88.081807,
}}
zoom={15}
style={style}
/>
);
}
}

export default GoogleApiWrapper({
apiKey: "myKey",
})(MapContainer);

[Bytegardener]

Can you see my mistake? Your help is appreciated

[HsuTimothy]

@Bytegardener Looks right to me. I'd confirm that you set up your API key correctly

[Bytegardener]

I can confirm, that I have used the key before on another project and it works.
To be sure, I recreated a new key under the Maps Javascript API console, and used that - still getting the same result....

[Bytegardener]

apiKey:"AIzaSyCkDfabelkF2SgcRgl1QUjfoilbOKbzLEo"

[HsuTimothy]

@Bytegardener I wouldn't recommend posting your apiKey in a public forum like this unless it doesn't contain any sensitive information

It looks like your usage is correct here. Are there any error messages or is it just showing up blank?

[Bytegardener]

@HsuTimothy Thanks - I will delete the key and get a new one.
There is no error on the console.

[williamjingo]

I hope this helps someone.
@HsuTimothy, the reason you are seeing a blank screen is because the styles are not being applied to the map.

<div style={style}>
    <Map google={this.props.google} />
</div>

change to

<Map google={this.props.google} style={style} />

And pass the styles as a prop to the Map component or even declare the styles directly in the Map component

render() {
    return (
        <div style={this.props.style} ref='map'>
            Loading map...
        </div>
    )
}

Also note: it will be wise to use position: relative so that the map is placed relative to its current position without changing the layout around it.

[Jasondecode2020]

I know it's stupid, but it happened to me, if there are 2 blank windows, we should not use React.StrictMode.
// <React.StrictMode>
,
// </React.StrictMode>,
document.getElementById('root')
);
If there is one big blank window, it is because we set our theme color to white, if you check dom, you can see that element
just set color to black,
{selectedPark &&
<InfoWindow
onCloseClick={() => {
setSelectedPark(null);
}}
position={selectedPark.coords}
>

<h1 style={{color:'black'}}>{selectedPark.content}

}
hope it helps