diff --git a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
index b48da7863..3beb1413a 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
+++ b/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 (
void
+ coordinates: Coordinates
}