Google Map ist nicht in React App Rendering

Question

ich mit diesem package.json Die Bibliothek i für die Komponente verwende arbeite ich für Google-Karte bin mit 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" 
    }, 
    ... 

} 

in Flash My Marker zeichnen und dann wird sie verschwinden, Google Map rendert nie, meine Komponente basiert auf Beispiel einer einfachen Karte von Google Map React, wenn ich versuche, es in React-Router zu rendern, zeigt Nothing auch Kindereigenschaft von App scheint null zu sein.

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> 
     ); 
    } 
} 

Meine App wie folgt aussehen

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

Jede Hilfe wäre sehr willkommen, meine bisher beste Vermutung ist, dass es nicht richtig mit 0,14 Reagieren arbeitet, wahrscheinlich aufgrund einiger Änderungen.

Answer 1

Ich habe das Problem durch Anwendung der Klasse behoben.

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

das Problem war die Karte Behälter mit einer Höhe oder Breite, so dass Höhe und Breite in Prozent nicht funktionieren haben. Der Container muss über einen eigenen Speicherplatz verfügen. wiedergegeben werden.