diff --git a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
index 256ad149a..b48da7863 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
+++ b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
@@ -1,5 +1,6 @@
"use client"
+import { useMap } from "@vis.gl/react-google-maps"
import { useCallback, useState } from "react"
import { useIntl } from "react-intl"
@@ -19,6 +20,7 @@ export default function Sidebar({
onActivePoiChange,
}: SidebarProps) {
const intl = useIntl()
+ const map = useMap()
const [isFullScreenSidebar, setIsFullScreenSidebar] = useState(false)
const poiGroups = new Set(pointsOfInterest.map(({ group }) => group))
const poisInGroups = Array.from(poiGroups).map((group) => ({
@@ -31,11 +33,12 @@ export default function Sidebar({
}
const handlePoiClick = useCallback(
- (poiName: string) => {
+ (poiName: string, coordinates: { lat: number; lng: number }) => {
onActivePoiChange(activePoi === poiName ? null : poiName)
+ map?.panTo(coordinates)
toggleFullScreenSidebar()
},
- [activePoi, onActivePoiChange]
+ [activePoi, onActivePoiChange, map]
)
return (
@@ -87,7 +90,7 @@ export default function Sidebar({
className={`${styles.poiButton} ${activePoi === poi.name ? styles.active : ""}`}
onMouseEnter={() => onActivePoiChange(poi.name)}
onMouseLeave={() => onActivePoiChange(null)}
- onClick={() => handlePoiClick(poi.name)}
+ onClick={() => handlePoiClick(poi.name, poi.coordinates)}
>
{poi.name}
{poi.distance} km
diff --git a/components/Maps/InteractiveMap/index.tsx b/components/Maps/InteractiveMap/index.tsx
index 4c0ba9662..d3c9b8667 100644
--- a/components/Maps/InteractiveMap/index.tsx
+++ b/components/Maps/InteractiveMap/index.tsx
@@ -79,7 +79,6 @@ export default function InteractiveMap({