Google Map là Không Rendering trong Phản ứng App

Question

tôi đang làm việc với package.json này Thư viện tôi đang sử dụng cho thành phần Tôi đang sử dụng cho bản đồ google được 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" 
    }, 
    ... 

} 

marker bốc thăm tôi trong flash và sau đó họ biến mất, bản đồ google không bao giờ hiển thị, thành phần của tôi dựa trên ví dụ về bản đồ đơn giản của Google Map React, khi tôi cố gắng hiển thị nó trong React-Router, Không có gì hiển thị cũng thuộc tính con của ứng dụng dường như là rỗng.

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 trông như thế này

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

Bất kỳ trợ giúp sẽ được nhiều đánh giá cao, tôi cho đến nay đoán tốt nhất đã được rằng nó không hoạt động đúng với Phản ứng 0,14, có thể là do một số thay đổi.

Answer 1

Tôi đã khắc phục sự cố bằng cách áp dụng lớp học.

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

vấn đề là người chứa đựng bản đồ phải có một chiều cao hoặc chiều rộng, cho chiều cao và rộng trong trăm wont work. Vùng chứa phải có không gian riêng. được hiển thị tại.