title: Google-Maps-React: Problems passing props to App.js
body: <p>I'm working on a website and I'd like to use google maps API via Google-Maps-React package.
  I've tested it before, as a single application, and I successfully manage to get data back from the API and render it on screen. Now I'm trying to use it on my actual project and it is not working. I imagine that the issue might be that I'm not passing props properly from a component to another. </p>
  
  <p>Any suggestions on how to fix this issue would be very much appreciated. Thank you very much!  </p>
  
  <p>Here are my two components and the message I'm getting on the console (Webpack compiled successfully) :</p>
  
  <p><strong>index.js:139 Uncaught Error: You must include a <code>google</code> prop
      at new Map (index.js:139)</strong></p>
  
  <p><strong>Venue.js</strong> 
  <em>holds the actual map</em></p>
  
  <pre><code>import { Map, GoogleApiWrapper, Marker } from "google-maps-react";
  
  const mapStyles = {
      width: '100%',
      heigth: '100%',
  };
  
  export class MapContainer extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              venues: [
                  { lat: 52.471015, lng: 12.719707 }
              ]
          }
      }
  
      displayMarkers = () =&gt; {
          return this.state.venues.map((venue, index) =&gt; {
            return &lt;Marker key={index} id={index} position={{
              lat: venue.latitude,
              lng: venue.longitude
            }}
            onClick={() =&gt; console.log(this.state.venues)} /&gt;
          })
        }
  
        render() {
          return (
            &lt;Map
             google={this.props.google}
             zoom={8}
             style={mapStyles}
             initialCenter={{ lat: 52.471015, lng: 12.719707 }}
            &gt;
              {this.displayMarkers()}
  
            &lt;/Map&gt;
          );
        }
      }
  
  
  export default GoogleApiWrapper({
      apiKey:''
    })(MapContainer);
  </code></pre>
  
  <p><strong>App.js</strong> </p>
  
  <pre><code>import React from "react";
  import { BrowserRouter, Route, Link } from "react-router-dom";
  import Main from "./main";
  import MapContainer from "google-maps-react";
  
  
  export class App extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              error: false,
          };        
      }
  
      componentDidMount() {
          console.log("App mounted");
  
      }
  
      render() {
          return (
              &lt;BrowserRouter&gt;
                  &lt;div&gt;
                      &lt;Route exact path="/" component={Main} /&gt;
                      &lt;Route exact path="/venue" component={MapContainer} /&gt;
                  &lt;/div&gt;
              &lt;/BrowserRouter&gt;
          );
      }
  }
  </code></pre>