Define map dimensions in the wrapper, not within the map with props

src/components/Map/Map.css

@@ -0,0 +1,4 @@
+.root {
+  width: 100%;
+  height: 100%;
+}

src/components/Map/Map.example.js

@@ -1,10 +1,11 @@
+import React from 'react';
 import Map from './Map';
 import { types } from '../../util/sdkLoader';
 
 const { LatLng } = types;
 
 export const Empty = {
-  component: Map,
+  component: props => <div style={{ height: 400 }}><Map {...props} /></div>,
   props: {
     center: new LatLng(60.16502999999999, 24.940064399999983),
     address: 'Sharetribe',

src/components/Map/Map.js

@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import * as propTypes from '../../util/propTypes';
 
+import css from './Map.css';
+
 class Map extends Component {
   componentDidMount() {
     const mapsLibLoaded = window.google && window.google.maps;
@@ -25,12 +27,10 @@ class Map extends Component {
     });
   }
   render() {
-    const { className, width, height } = this.props;
-    const style = { width, height };
+    const { className } = this.props;
     return (
       <div
-        className={className}
-        style={style}
+        className={`${className} ${css.root}`}
         ref={el => {
           this.el = el;
         }}
@@ -39,14 +39,12 @@ class Map extends Component {
   }
 }
 
-Map.defaultProps = { className: '', width: '100%', height: 300, zoom: 11 };
+Map.defaultProps = { className: '', zoom: 11 };
 
-const { string, oneOfType, number } = PropTypes;
+const { string, number } = PropTypes;
 
 Map.propTypes = {
   className: string,
-  width: oneOfType([number, string]),
-  height: oneOfType([number, string]),
   center: propTypes.latlng.isRequired,
   address: string.isRequired,
   zoom: number,

src/containers/ListingPage/ListingPage.js

@@ -91,7 +91,7 @@ export class ListingPageComponent extends Component {
         {/* eslint-disable react/no-danger */}
         <div className={css.description} dangerouslySetInnerHTML={{ __html: description }} />
         {/* eslint-enable react/no-danger */}
-        {map}
+        {map ? <div style={{ height: 300 }}>{map}</div> : null}
         <div className={css.filterSection}>
           <h1>Here will be filters (or dragons)</h1>
           <h2>Studio type</h2>

src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap

@@ -7,18 +7,23 @@ exports[`ListingPage matches snapshot 1`] = `
         "__html": "listing1 description",
       }
     } />
-  <Map
-    address="listing1 address"
-    center={
-      LatLng {
-        "lat": 40,
-        "lng": 60,
+  <div
+    style={
+      Object {
+        "height": 300,
       }
-    }
-    className=""
-    height={300}
-    width="100%"
-    zoom={11} />
+    }>
+    <Map
+      address="listing1 address"
+      center={
+        LatLng {
+          "lat": 40,
+          "lng": 60,
+        }
+      }
+      className=""
+      zoom={11} />
+  </div>
   <div>
     <h1>
       Here will be filters (or dragons)