title: TypeError: Cannot read property 'array' of undefined when trying to use google-maps-react
body: <p>I am new to ReactJS, but familiar with React Native. I am trying to to get a basic map component to be displayed. </p>
  
  <p>My map component is</p>
  
  <p>WaterMapView.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
  
  export class WaterMapView extends Component {
      render () {
          console.log(' I am here ');
          return (
              &lt;Map
                  google={this.props.google}
                  style={styles.mapStyle}
                  initialCenter={{
                      lat: 40.854885,
                      lng: -88.081807
                          }}
                  zoom={15}
              /&gt;
          )
      }
  }
  
  const styles = {
      mapStyle: {
          height: '100%',
          width: '100%'
      }
  }
  export default GoogleApiWrapper({
    apiKey: 'AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  })(WaterMapView)
  </code></pre>
  
  <p>This component is embedded in MainDashboard.js as follows :</p>
  
  <pre><code>import React, { Component } from 'react';
  import windowSize from 'react-window-size';
  import WaterMapView from './WaterMapView';
  
  class MainDashboard extends Component {
    render () {
    const height = this.props.windowHeight;
    const {
        containerStyle,
        headerStyle,
        navigationStyle,
        mainPageStyle,
        eventPageStyle,
        mapPageStyle,
        mapDisplayStyle,
        mapPropertiesStyle
      } = styles; 
  
    return (
      &lt;div style={{ ...containerStyle, height }} &gt;
        &lt;div style={headerStyle} &gt;
        &lt;/div&gt;
        &lt;div style={navigationStyle} &gt;
        &lt;/div&gt;
        &lt;div style={mainPageStyle} &gt;
          &lt;div style={eventPageStyle} &gt;
          &lt;/div&gt;
          &lt;div style={mapPageStyle} &gt;
              &lt;div style={mapDisplayStyle} &gt;
                  &lt;WaterMapView /&gt;
              &lt;/div&gt;
              &lt;div style={mapPropertiesStyle} &gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      );
    };
  };
  </code></pre>
  
  <p>My App.js component is :</p>
  
  <pre><code>import React from 'react';
  import MainDashboard from './MainDashboard'; 
  
  const App = () =&gt; {
          return (
              &lt;div&gt;
                  &lt;MainDashboard /&gt;
              &lt;/div&gt;
          )
  };
  
  export default App
  </code></pre>
  
  <p>And index.js is : </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './Components/App';
  import registerServiceWorker from './registerServiceWorker';
  
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p>I am using React version 16.0.0 and google-maps-react version 1.1.0</p>
  
  <p>I get an error accompanied by a dump of code. The error is :</p>
  
  <p>TypeError: Cannot read property 'array' of undefined</p>
  
  <p>I am not including the dump in this post. I can add that if required.</p>
  
  <p>The problem seems very basic as the I do not even see the console.log statement 'I am here' in WaterMapView.js component.</p>
  
  <p>Let me know what am I missing.</p>