The map was rendered fine for first time, but the map turn to grey on second time

[JoeHetfield]

Hi, love your work.

I'm new to google map and reactjs. I built a component with react-google-map and place it on one of my page. I found that if that page was load for first time, everything work good and well, but if navigate to leave that page, and then navigate back to it, the map was gone, only left a google logo and a grey blank area. and If I drag the browser window to resize it for a little, the map appeared again. It feels like the map was drawn correctly, but just invisible for some reason. and the window resize will trigger some action to make it right.

I googled around and searched the issues in this repo, I think I need to trigger the resize event programatically. but I don't know how, where and when.

Btw, I'm using the react-router for navigation control. and ScriptjsLoader to load google map api.

Could anyone give me some hints?

Thanks.

[RockingRolli]

Do you have a transition related to the map? I had exactly the same issue as you and after some investigation I found out that a transition is causing these issues.
My map is inside a widget that can be collapsed and has a transition effect when showing the content. Removing the transition made the error disappear.
Unfortunately that is not a solution, but narrows down the issue.

HTH

[JoeHetfield]

Yes, I made transition on the map for kind of page turning effect.
But the problem remain unsolved :(

[RockingRolli]

I guess letting the map render when the transition effect is finished could solve the issue, but today I am too lazy to try.

[tomchentw]

We're going to look into this shortly. In the meantime, feel free to submit a minimal repository that can fully reproduce this error so that anyone can try to help out. Thanks.

We're also looking for maintainers. Involve in #266 to help strengthen our community!

[gregegan]

Just following up on this to see if any progress on this issue?

[tomchentw]

Please refer to Getting Help section in the README (or #469).