Adapt the interactive map for reuse

components/ContentType/HotelPage/Map/DynamicMap/dynamicMap.module.css

@@ -14,3 +14,9 @@
     top: var(--main-menu-desktop-height);
   }
 }
+
+.closeButton {
+  pointer-events: initial;
+  box-shadow: var(--button-box-shadow);
+  gap: var(--Spacing-x-half);
+}

components/ContentType/HotelPage/Map/DynamicMap/index.tsx

@@ -6,7 +6,9 @@ import { useIntl } from "react-intl"
 
 import useHotelPageStore from "@/stores/hotel-page"
 
-import MapContent from "@/components/Maps/InteractiveMap"
+import CloseLargeIcon from "@/components/Icons/CloseLarge"
+import InteractiveMap from "@/components/Maps/InteractiveMap"
+import Button from "@/components/TempDesignSystem/Button"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 
 import Sidebar from "./Sidebar"
@@ -52,6 +54,20 @@ export default function DynamicMap({
     }
   }, [isDynamicMapOpen, scrollHeightWhenOpened])
 
+  const closeButton = (
+    <Button
+      theme="base"
+      intent="inverted"
+      variant="icon"
+      size="small"
+      className={styles.closeButton}
+      onClick={closeDynamicMap}
+    >
+      <CloseLargeIcon color="burgundy" />
+      <span>{intl.formatMessage({ id: "Close the map" })}</span>
+    </Button>
+  )
+
   return (
     <APIProvider apiKey={apiKey}>
       <Modal isOpen={isDynamicMapOpen}>
@@ -68,7 +84,8 @@ export default function DynamicMap({
             pointsOfInterest={pointsOfInterest}
             onActivePoiChange={setActivePoi}
           />
-          <MapContent
+          <InteractiveMap
+            closeButton={closeButton}
             coordinates={coordinates}
             pointsOfInterest={pointsOfInterest}
             activePoi={activePoi}