React-google-maps: maps not showing up

[singla96]

Hi,
I am new to react and was trying to integrate the api. but the maps is not showing up. I have posted the code at stachoverflow but no replies yet . https://stackoverflow.com/questions/44869900/react-google-maps-not-showing-on-screen . I have added map div height and width. Pleas help

[chenchienhao]

Did u add <script src="https://maps.googleapis.com/maps/api/js"></script> in html?
Also could be CSS problem..., check this: #385

[oshalygin]

Either add the script as @chenchienhao mentioned or you can use googleURL as a param if you're doing this asynchronously.

[singla96]

It was react version issue I guess. Downgrading from v15 worked

[hakimelek]

Any idea what was the issue with React?

[oshalygin]

I highly doubt its related to React V15, but from the sound of it, it could be other dependencies in your project.

[hakimelek]

I am running it in a storybook. I had the async example to run without errors but nothing is showing up in the screen.

[oshalygin]

@hakimelek take a look at the DEMO application in the README.md, that should help identify any of the missing steps.

Keep in mind you need to include the google maps library.

[byrekt]

If anyone else has a similar issue, it was a styling issue. Since the example in the docs has
containerElement={ <div style={{ height:100%}} /> } and for some reason in storybook it wasn't correctly detecting the height of the parent element it was rendering at 0px height. Setting a height to a pixel value resolved it for storybook.