Use ReusableMapContainer

src/components/SearchMap/SearchMap.js

@@ -12,6 +12,7 @@ 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';
@@ -240,6 +241,7 @@ export class SearchMapComponent extends Component {
     const {
       className,
       rootClassName,
+      reusableContainerClassName,
       center,
       isOpenOnModal,
       listings: originalListings,
@@ -263,28 +265,30 @@ 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 ? (
-      <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 className={reusableContainerClassName}>
+        <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>
     ) : (
       <div className={classes} />
     );
@@ -296,6 +300,7 @@ SearchMapComponent.defaultProps = {
   className: null,
   rootClassName: null,
   mapRootClassName: null,
+  reusableContainerClassName: null,
   bounds: null,
   center: new sdkTypes.LatLng(0, 0),
   activeListingId: null,
@@ -311,6 +316,7 @@ SearchMapComponent.propTypes = {
   className: string,
   rootClassName: string,
   mapRootClassName: string,
+  reusableContainerClassName: string,
   bounds: propTypes.latlngBounds,
   center: propTypes.latlng,
   activeListingId: propTypes.uuid,

src/containers/SearchPage/SearchPage.js

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

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

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