title: Typescript and react-google-maps type errors
body: <p>I'm a beginner with Typescript and very confused. I have a component that uses <code>react-google-maps</code> where the component is reusable.</p>
  
  <p><code>Map.tsx</code></p>
  
  <pre><code>import * as React from 'react';
  import { compose, withStateHandlers } from 'recompose';
  import { GoogleMap, withGoogleMap } from 'react-google-maps';
  
  const ContactMap: React.ComponentClass&lt;{}&gt; = compose(
    withStateHandlers(() =&gt; ({
      isOpen: false,
      // tslint:disable-next-line:align
    }), {
        onToggleOpen: ({ isOpen }) =&gt; () =&gt; ({
          isOpen: !isOpen,
        }),
      }),
    withGoogleMap,
  )(props =&gt;
    &lt;div&gt;
      &lt;GoogleMap
        defaultZoom={props.zoom}
        defaultCenter={props.center}
        defaultOptions={{
          streetViewControl: false,
          scaleControl: false,
          mapTypeControl: false,
          panControl: false,
          zoomControl: false,
          rotateControl: false,
          fullscreenControl: false,
          disableDefaultUI: true,
          scrollwheel: false,
        }}
      &gt;
        {props.children}
      &lt;/GoogleMap&gt;,
    &lt;/div&gt;,
  );
  
  export default ContactMap;
  </code></pre>
  
  <p>And the error is: <code>Property 'zoom' does not exist on type '{ children?: ReactNode; }'.</code> and I assume it'll do the same for <code>center</code>.</p>
  
  <p>I've tried something like</p>
  
  <pre><code>interface Props {
    containerElement: any;
    mapElement: any;
    zoom: number;
    center: any;
  }
  </code></pre>
  
  <p>And passing that in but that doesn't solve the problem. It returns</p>
  
  <pre><code>Type 'ComponentClass&lt;{}&gt;' is not assignable to type 'ComponentClass&lt;Props&gt;'.
    Type '{}' is not assignable to type 'Props'.
      Property 'containerElement' is missing in type '{}'.
  </code></pre>
  
  <p>My component that uses the map:</p>
  
  <pre><code>import * as React from 'react';
  import { Map } from '@ecomm/map';
  import { InfoWindow, Marker } from 'react-google-maps';
  
  const ContactMap: React.SFC = () =&gt; {
    return (
      &lt;Map
        containerElement={&lt;div style={{ height: `400px` }} /&gt;}
        mapElement={&lt;div style={{ height: `100%` }} /&gt;}
        center={{
          lat: 40.745093,
          lng: -73.993048,
        }}
        zoom={16}
      &gt;
        &lt;Marker
          position={{
            lat: 40.745093,
            lng: -73.993048,
          }}
        &gt;
          &lt;InfoWindow&gt;
            &lt;TextHeader&gt;CHELSEA STUDIO&lt;/TextHeader&gt;
          &lt;/InfoWindow&gt;
        &lt;/Marker&gt;
      &lt;/Map&gt;
    );
  };
  
  export default ContactMap;
  </code></pre>
  
  <p>I'm not sure to go from here and it's frustrating. Any help would be appreciated. Thank you.</p>