React map not rendering

Question

I'm having trouble getting my Google Maps rendered on the screen. I've seen this question but even doing so hasn't solved my problem.

What I have:

import React from 'react'
import GoogleMap from 'google-map-react';
import withStyles from 'isomorphic-style-loader/lib/withStyles'
import s from './CarMap.css'

class MoobieMap extends React.Component {

    constructor(props){
        super(props)
    }

    render() {
        return (
            <div className={s.map}>
            <GoogleMap apiKey={API_KEY} center={{lat: -23.5925282, long: -46.6891377}} zoom={3}/>
            </div>
        )
    }
}

export default withStyles(s)(MoobieMap)

And:

import React from 'react'
import Layout from '../../components/Layout'
import MoobieMap from './CarMap'

const title = 'Mapa de carros'

export default {

  path: '/car-map',

  async action() {
    return {
      title,
      chunk: 'component',
      component: <Layout title={title}><MoobieMap /></Layout>,
    }
  },

}

And the css:

.map {
    width: 100%;
    height: 400px;
}

I'm also using the React starter kit. My DOM looks like this:

I also have no js error in my console.

What am I missing here ? Thanks!!!

EDIT:

Answer 1

Try to import only the css wihtout naming them like :

import React from 'react'
import GoogleMap from 'google-map-react';
import withStyles from 'isomorphic-style-loader/lib/withStyles'
import './CarMap.css'

class MoobieMap extends React.Component {

    constructor(props){
        super(props)
    }

    render() {
        return (
            <div>
            <GoogleMap apiKey={API_KEY} center={{lat: -23.5925282, long: -46.6891377}} zoom={3} className="map"/>
            </div>
        )
    }
}

export default withStyles(s)(MoobieMap)

What's this (s) between the connect of MoobieMap and withstyles?

I hope it helps and please tell me that your .map there's width and height declared...