React-google-maps: The example-"simple map" shows nothing in my project

[huangda2100]

How to use these components? Anybody can show me a full simple project?

[yazamiko]

Same here, I followed all steps and my page shows nothing

[GayanSandaruwan]

@yazamiko in developer tools did you check whether map is downloading ?
If it is downloading then you might have to adjust styles.

[thientran1707]

did you specify the width and height of the container?

[cagarweyne]

I had the same issue, I inspected the DOM and found that the div containing my map had an inline style of position: relative - this was causing it to not display anything. Hence why you also have no errors in the console. So, check your CSS.

[piya23300]

For me, the map is rendered but it has a style problem.

I use display: flex to solve it.

<div style="display: flex;">
    <div style="width: 300px; height: 300px;">
    </div>
    <div>
         <myGoogleMap
               containerElement={
                   <div style={{ height: '100%' }} />
               }
               mapElement={
                   <div style={{ height: '100%' }} />
               }
                markers={markers}
          />
    </div>
</div>

[tomchentw]

Try the new v8.0.0 with new docs:
https://tomchentw.github.io/react-google-maps/