title: Uncaught Error: onlyChild must be passed a children with exactly one child
body: <p>I have tried 4 react google map packages by now and all fail, so I want to just use google maps directly. I am getting <code>Uncaught Error: onlyChild must be passed a children with exactly one child.</code></p>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  
  import GMap from './components/app';
  import reducers from './reducers';
  
  const createStoreWithMiddleware = applyMiddleware()(createStore);
  
  var initialCenter = { lng: -90.1056957, lat: 29.9717272 }
  
  ReactDOM.render(
    &lt;Provider store={createStoreWithMiddleware(reducers)}&gt;
      &lt;GMap initialCenter={initialCenter} /&gt;,
    &lt;/Provider&gt;
    , document.querySelector('.container'));
  </code></pre>
  
  <p>components/app.js</p>
  
  <pre><code>import React from 'react';
  
  
  class GMap extends React.Component {
    constructor(props){
        super(props);
        this.state = { zoom: 10 };
    }
  
      render() {
          return (
              &lt;div className="GMap"&gt;
                &lt;div className='GMap-canvas' ref="mapCanvas"&gt;&lt;/div&gt;
            &lt;/div&gt;
          )
    }
  
    componentDidMount() {
      // create the map, marker and infoWindow after the component has
      // been rendered because we need to manipulate the DOM for Google =(
      this.setState({ map: this.createMap() })
    }
  
    createMap() {
      let mapOptions = {
        zoom: this.state.zoom,
        center: this.mapCenter()
      }
      return new google.maps.Map(this.refs.mapCanvas, mapOptions);
    }
  
    mapCenter() {
      return new google.maps.LatLng(30.3, -97.75);
    }
  }
  </code></pre>