Google Map non è il rendering in Reagire App

Question

sto lavorando con questo package.json La biblioteca che sto usando per il componente che sto usando per 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" 
    }, 
    ... 

} 

mio marcatore pareggio in flash e poi scompare, google map non esegue mai il rendering, il mio componente è basato sull'esempio di Simple map di Google Map React, quando provo a renderlo in React-Router, Nothing visualizza anche la proprietà child di App sembra essere nullo.

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 si presenta così

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')) 

Qualsiasi aiuto sarebbe molto apprezzato, il mio finora ipotesi migliore è che la sua non funziona correttamente con Reagire 0.14, probabilmente a causa di alcuni cambiamenti.

Answer 1

Ho risolto il problema applicando la classe.

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

il problema è stato il contenitore mappa deve avere un'altezza o larghezza, dando altezza e larghezza in cento abituato lavoro. Il contenitore deve avere il proprio spazio. essere reso a