CODEWITHSUNDEEP
javascriptreactjsgoogle-mapsreact-bootstrap
CodeKing
CodeKing

Reputation: 11

Google Maps renders as grey box


I'm new to ReactJS and played with it a bit.

I try to display a Google Map in a collapsible 'React-Bootstrap' Panel. But I just get a grey box. After a window resize the map displays correctly.
Here is my code

But I'm stuck. If I collapse the panel, the Map is always displayed as a gray box.See here

My thought was that I could add a state to the panel which would be changed when I opened it, which then I pass on to the child component to re-render the component.

Last but not least, I tried to build a 'watcher', which triggers 

google.maps.event.trigger(map, "resize");

but failed too.

I have no idea what else I can do or what will work correctly.
I am thankful for every help.

Upvotes: 1

Views: 1431

Answers (2)

sifriday
sifriday

Reputation: 4462

Problems like this with Google Maps are usually due to the div that holds the map not being visible or not having height when the map is drawn. The API is quite particular. The fix is usually, therefore, to ensure the div holding the map is visible and has height before drawing the map.

I've patched your example to:

  1. Load with the panel open
  2. Draw the map
  3. Call a toggle callback, to hide the map
  4. Thereafter control the panel using the onSelect method from the header

You can find this here, with the map working:

https://codesandbox.io/s/nwno9vw07j

Upvotes: 1

Trevor
Trevor

Reputation: 2922

I am unsure if this will help, but in my own use of google maps. I get the grey box if google maps is loaded while the containing div is hidden. It's like it loads to a size of nothing. But if the containing div is visible when the maps load, then it's happy. So you'd have to hold off starting the map until you manually expand your collapsible panel, then immediately collapse it. You can trick it by using the opacity instead and make it transparent to avoid a flickering as things resize on screen.

Upvotes: 0

Related Questions