feat(SW-552): add fitbounds

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

@@ -12,12 +12,14 @@ import Title from "@/components/TempDesignSystem/Text/Title"
 import styles from "./sidebar.module.css"
 
 import type { SidebarProps } from "@/types/components/hotelPage/map/sidebar"
+import { Coordinates } from "@/types/components/maps/coordinates"
 
 export default function Sidebar({
   activePoi,
   hotelName,
   pointsOfInterest,
   onActivePoiChange,
+  coordinates,
 }: SidebarProps) {
   const intl = useIntl()
   const map = useMap()
@@ -32,14 +34,22 @@ export default function Sidebar({
     setIsFullScreenSidebar((prev) => !prev)
   }
 
-  const handlePoiClick = useCallback(
-    (poiName: string, coordinates: { lat: number; lng: number }) => {
-      onActivePoiChange(activePoi === poiName ? null : poiName)
-      map?.panTo(coordinates)
-      toggleFullScreenSidebar()
-    },
-    [activePoi, onActivePoiChange, map]
-  )
+  function moveToPoi(poiCoordinates: Coordinates) {
+    if (map) {
+      const bounds = new google.maps.LatLngBounds()
+      bounds.extend(new google.maps.LatLng(coordinates.lat, coordinates.lng))
+      bounds.extend(
+        new google.maps.LatLng(poiCoordinates.lat, poiCoordinates.lng)
+      )
+      map.fitBounds(bounds)
+    }
+  }
+
+  function handlePoiClick(poiName: string, coordinates: Coordinates) {
+    onActivePoiChange(activePoi === poiName ? null : poiName)
+    moveToPoi(coordinates)
+    toggleFullScreenSidebar()
+  }
 
   return (
     <aside

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

@@ -83,6 +83,7 @@ export default function DynamicMap({
             hotelName={hotelName}
             pointsOfInterest={pointsOfInterest}
             onActivePoiChange={setActivePoi}
+            coordinates={coordinates}
           />
           <InteractiveMap
             closeButton={closeButton}

types/components/hotelPage/map/sidebar.ts

@@ -1,8 +1,10 @@
 import type { PointOfInterest } from "@/types/hotel"
+import type { Coordinates } from "../../maps/coordinates"
 
 export interface SidebarProps {
   hotelName: string
   pointsOfInterest: PointOfInterest[]
   activePoi: PointOfInterest["name"] | null
   onActivePoiChange: (poi: PointOfInterest["name"] | null) => void
+  coordinates: Coordinates
 }