Fix: render only when mountNode is present

src/components/SearchMap/SearchMap.js

@@ -12,7 +12,6 @@ import { googleBoundsToSDKBounds } from '../../util/googleMaps';
 import { SearchMapInfoCard, SearchMapPriceLabel, SearchMapGroupLabel } from '../../components';
 import config from '../../config';
 
-import ReusableMapContainer from './ReusableMapContainer';
 import css from './SearchMap.css';
 
 const LABEL_HANDLE = 'SearchMapLabel';
@@ -241,7 +240,6 @@ export class SearchMapComponent extends Component {
     const {
       className,
       rootClassName,
-      reuseableContainerClassName,
       center,
       isOpenOnModal,
       listings: originalListings,
@@ -265,30 +263,28 @@ export class SearchMapComponent extends Component {
     // container element listens clicks so that opened SearchMapInfoCard can be closed
     /* eslint-disable jsx-a11y/no-static-element-interactions */
     return isMapsLibLoaded ? (
-      <ReusableMapContainer className={reuseableContainerClassName}>
-        <MapWithGoogleMap
-          containerElement={<div className={classes} onClick={this.onMapClicked} />}
-          mapElement={<div className={mapClasses} />}
-          center={center}
-          isOpenOnModal={isOpenOnModal}
-          listings={listings}
-          activeListingId={activeListingId}
-          infoCardOpen={this.state.infoCardOpen}
-          onListingClicked={this.onListingClicked}
-          onMapLoad={this.onMapLoadHandler}
-          onIdle={() => {
-            if (this.googleMap) {
-              onIdle(this.googleMap);
-            }
-          }}
-          onCloseAsModal={() => {
-            if (onCloseAsModal) {
-              onCloseAsModal();
-            }
-          }}
-          zoom={zoom}
-        />
-      </ReusableMapContainer>
+      <MapWithGoogleMap
+        containerElement={<div className={classes} onClick={this.onMapClicked} />}
+        mapElement={<div className={mapClasses} />}
+        center={center}
+        isOpenOnModal={isOpenOnModal}
+        listings={listings}
+        activeListingId={activeListingId}
+        infoCardOpen={this.state.infoCardOpen}
+        onListingClicked={this.onListingClicked}
+        onMapLoad={this.onMapLoadHandler}
+        onIdle={() => {
+          if (this.googleMap) {
+            onIdle(this.googleMap);
+          }
+        }}
+        onCloseAsModal={() => {
+          if (onCloseAsModal) {
+            onCloseAsModal();
+          }
+        }}
+        zoom={zoom}
+      />
     ) : (
       <div className={classes} />
     );
@@ -300,7 +296,6 @@ SearchMapComponent.defaultProps = {
   className: null,
   rootClassName: null,
   mapRootClassName: null,
-  reuseableContainerClassName: null,
   bounds: null,
   center: new sdkTypes.LatLng(0, 0),
   activeListingId: null,
@@ -316,7 +311,6 @@ SearchMapComponent.propTypes = {
   className: string,
   rootClassName: string,
   mapRootClassName: string,
-  reuseableContainerClassName: string,
   bounds: propTypes.latlngBounds,
   center: propTypes.latlng,
   activeListingId: propTypes.uuid,

src/containers/SearchPage/SearchPage.js

@@ -251,10 +251,9 @@ export class SearchPageComponent extends Component {
             showAsModalMaxWidth={MODAL_BREAKPOINT}
             onManageDisableScrolling={onManageDisableScrolling}
           >
-            <div className={css.mapWrapper}>
+            <div className={css.map}>
               {shouldShowSearchMap ? (
                 <SearchMap
-                  reuseableContainerClassName={css.map}
                   activeListingId={activeListingId}
                   bounds={bounds}
                   center={origin}

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

@@ -116,7 +116,6 @@ exports[`SearchPageComponent matches snapshot 1`] = `
           mapRootClassName={null}
           onCloseAsModal={[Function]}
           onIdle={[Function]}
-          reuseableContainerClassName={null}
           rootClassName={null}
           useLocationSearchBounds={true}
           zoom={11}