Empty Grey Box When Conditionally Rendering GMaps

[abbasyadollahi]

Before mounting the google map, I'm waiting for some requests to finish so I'm trying to put another element in the meantime. The problem is that an empty grey div stays even though I'm not rendering the google map and as a result pushes my loading screen all the way to the bottom.

Here's a snippet of the elements I'm trying to render:

return (Object.keys(this.state.center).length !== 0) ? (
      <GoogleMap
        defaultZoom={this.state.zoom}
        defaultCenter={this.state.center}
        options={{scrollwheel: true}}
      >
        {this.state.municipalities.map(municipality => {
          return <Polygon key={municipality.name}
                          paths={municipality.borders}
                          fillOpacity={0.3}/>;
        })}
        {this.state.trees.map(tree => {
          return <Marker key={tree.treeId} position={{lat: tree.location.latitude, lng: tree.location.longitude}}/>;
        })}
      </GoogleMap>
    ) : (
      <div>
      <Segment>
        <Dimmer active>
          <Loader size='huge'/>
        </Dimmer>
        <Image centered size='medium' src={Logo}/>
      </Segment>
      </div>
    );

[SyedSaifAli]

@theGirrafish Center requires an object with lat, lng. From your above snippet it seems like you are passing an Array as center in defaultCenter.

try passing an object like {lat: latitude, lng: longitude} in defaultCenter or center property of map.

[abbasyadollahi]

@SyedSaifAli I'm sending an object {lat: latitude, lng: longitude} for the defaultCenter property and the map renders fine when it is loaded. The problem I have is that a grey div that would normally render the map persists even if I'm not rendering a <GoogleMap> element. I believe it might have something to do with the withProps but not sure

[SyedSaifAli]

Yes, you might have to use it like this

const MapComponent = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    zoom={props.zoom}
    center={props.center}
    onZoomChanged={props.onZoomChanged}
    ref={props.referance}
  > 
// your div
</GoogleMap>

to get it loaded. Try it and also tell what's the error you are getting in your console.

[abbasyadollahi]

@SyedSaifAli Hmm I just tried that, but when the map hasn't loaded, the grey div is still there and once the map does load, it renders both the map AND the loading screen all the way at the bottom (like in the screenshot but with map instead of the grey box). Also there's no errors in the console. Here's a snippet of my compose:

export default compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyAyesbQMyKVVbBgKVi2g6VX7mop2z96jBo&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{width: '100vw', height: '100vh'}}/>,
    containerElement: <div style={{height: '80vh'}}/>,
    mapElement: <div style={{height: '80vh'}}/>,
  }),
  withScriptjs,
  withGoogleMap
)(props => <TreeMap/>)

[hjJunior]

I have identified an weird behaviour, really inconsistent, when you have markers and one of them have invalid lat/lng you may have this empty grey box (and no errors on console :facepalm:)

On my specific case, this edge case was happening between new renders so everytime that I was updating the state, it was changing between empty box and the working map, also during this re-render I could notice a kick flash of map working with marker

Related with:

• #803
• #186

TL;DR: Check if you have any markers that may have an invalid Latitude / Longitude

[lagroms]

I have the same problem with the gray container. I have a loading spinner to display while waiting for data, but the gray container is still there

edit: just saw that the maintained package is this one : https://github.com/JustFly1984/react-google-maps-api