Google Map is Not Rendering in React App

Question

I am working with this package.json The library i am using for component I am using for google map is this

{
  "name": "webpack-win",
  "version": "1.0.0",
  "description": "none",
...
  "dependencies": {
    "alt": "^0.18.1",
    "alt-container": "^1.0.0",
    "google-map-react": "^0.9.3",
    "history": "^1.17.0",
    "material-design-icons": "^2.1.3",
    "material-ui": "^0.14.1",
    "open-browser-webpack-plugin": "0.0.2",
    "react": "^0.14.5",
    "react-dom": "^0.14.5",
    "react-router": "^1.0.3",
    "react-tap-event-plugin": "^0.2.1"
  },
     ...

}

My marker draw in flash and then they disappear, google map never renders, my component is based on example of Simple map of Google Map React, when i try to render it in React-Router, Nothing displays also children property of App appears to be null.

import React from 'react';
import shouldPureComponentUpdate from 'react-pure-render/function';
import GoogleMap from 'google-map-react';
import MyGreatPlace from './MapPlace.js';

export default class SimpleMapPage extends React.Component {
    static propTypes = {
        center: React.PropTypes.array,
        zoom: React.PropTypes.number,
        greatPlaceCoords: React.PropTypes.any
    };

    static defaultProps = {
        center: [59.938043, 30.337157],
        zoom: 9,
        greatPlaceCoords: {lat: 59.724465, lng: 30.080121}
    };

    shouldComponentUpdate = shouldPureComponentUpdate;

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="map">
                i worked
            <GoogleMap
                // apiKey={YOUR_GOOGLE_MAP_API_KEY} // set if you need stats etc ...
                center={this.props.center}
                zoom={this.props.zoom}>
                <MyGreatPlace lat={59.955413} lng={30.337844} text={'A'} /* Kreyser Avrora */ />
                <MyGreatPlace {...this.props.greatPlaceCoords} text={'B'} /* road circle */ />
            </GoogleMap>
                </div>
        );
    }
}

My App looks like this

const App = React.createClass({
  render() {
    return (
        <div>
          {this.props.children}
        </div>
    )
  }
})

render((
    <Router>
      <Route path="/" component={App}>
        <IndexRoute component={Map}/>
        <Route path="home" component={Home} />
        <Route path="location" component={Locations}/>
        <Route path="map" componenet={Map}/>
      </Route>
    </Router>
), document.getElementById('ReactApp'))

Any help would be much appreciated, my so far best guess has been that its not working properly with React 0.14, probably due to some changes.

Answer 1

I fixed the issue by applying class.

.map {
    width: 1000px;
    height: 1000px;
}

the issue was the map container must have a height or width, giving height and width in percent wont work. The container must have its own space. to be rendered at.