diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
index 7c5573536..cdf236184 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
@@ -1,7 +1,7 @@
import { notFound } from "next/navigation"
import { env } from "@/env/server"
-import { getLocations } from "@/lib/trpc/memoizedRequests"
+import { getCityCoordinates, getLocations } from "@/lib/trpc/memoizedRequests"
import { getHotelPins } from "@/components/HotelReservation/HotelCardDialogListing/utils"
import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
@@ -58,6 +58,7 @@ export default async function SelectHotelMapPage({
const hotelPins = getHotelPins(hotels)
const filterList = getFiltersFromHotels(hotels)
+ const cityCoordinates = await getCityCoordinates({ city: city.name })
return (
@@ -67,6 +68,7 @@ export default async function SelectHotelMapPage({
mapId={googleMapId}
hotels={hotels}
filterList={filterList}
+ cityCoordinates={cityCoordinates}
/>
)
diff --git a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
index db979bf47..d58cb10fc 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
+++ b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
@@ -60,13 +60,20 @@ export default function Sidebar({
}
}
- function handleMouseEnter(poiName: string) {
+ function handleMouseEnter(poiName: string | undefined) {
+ if (!poiName) return
+
if (!isClicking) {
onActivePoiChange(poiName)
}
}
- function handlePoiClick(poiName: string, poiCoordinates: Coordinates) {
+ function handlePoiClick(
+ poiName: string | undefined,
+ poiCoordinates: Coordinates
+ ) {
+ if (!poiName || !poiCoordinates) return
+
setIsClicking(true)
toggleFullScreenSidebar()
onActivePoiChange(poiName)
diff --git a/components/ContentType/HotelPage/Map/DynamicMap/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
index 969b24588..6af68db43 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
+++ b/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
@@ -113,7 +113,7 @@ export default function DynamicMap({
activePoi={activePoi}
hotelName={hotelName}
pointsOfInterest={pointsOfInterest}
- onActivePoiChange={setActivePoi}
+ onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
coordinates={coordinates}
/>
setActivePoi(poi ?? null)}
mapId={mapId}
/>
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
index 4fe186988..0d1d58eee 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
@@ -7,7 +7,7 @@ import { useMediaQuery } from "usehooks-ts"
import { selectHotel } from "@/constants/routes/hotelReservation"
-import { ArrowUpIcon, CloseIcon, CloseLargeIcon } from "@/components/Icons"
+import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
import InteractiveMap from "@/components/Maps/InteractiveMap"
import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
import Button from "@/components/TempDesignSystem/Button"
@@ -15,7 +15,6 @@ import useLang from "@/hooks/useLang"
import FilterAndSortModal from "../FilterAndSortModal"
import HotelListing from "./HotelListing"
-import { getCentralCoordinates } from "./utils"
import styles from "./selectHotelMap.module.css"
@@ -27,6 +26,7 @@ export default function SelectHotelMap({
mapId,
hotels,
filterList,
+ cityCoordinates,
}: SelectHotelMapProps) {
const searchParams = useSearchParams()
const router = useRouter()
@@ -36,15 +36,13 @@ export default function SelectHotelMap({
const [activeHotelPin, setActiveHotelPin] = useState(null)
const [showBackToTop, setShowBackToTop] = useState(false)
- const centralCoordinates = getCentralCoordinates(hotelPins)
-
- const coordinates = isAboveMobile
- ? centralCoordinates
- : { ...centralCoordinates, lat: centralCoordinates.lat - 0.006 }
-
const selectHotelParams = new URLSearchParams(searchParams.toString())
const selectedHotel = selectHotelParams.get("selectedHotel")
+ const coordinates = isAboveMobile
+ ? cityCoordinates
+ : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 }
+
useEffect(() => {
if (selectedHotel) {
setActiveHotelPin(selectedHotel)
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts b/components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts
deleted file mode 100644
index 7a4c32ecc..000000000
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
-
-export function getCentralCoordinates(hotels: HotelPin[]) {
- const centralCoordinates = hotels.reduce(
- (acc, pin) => {
- acc.lat += pin.coordinates.lat
- acc.lng += pin.coordinates.lng
- return acc
- },
- { lat: 0, lng: 0 }
- )
-
- centralCoordinates.lat /= hotels.length
- centralCoordinates.lng /= hotels.length
-
- return centralCoordinates
-}
diff --git a/components/Maps/InteractiveMap/HotelMapContent/index.tsx b/components/Maps/InteractiveMap/HotelMapContent/index.tsx
index 04c796c2c..662c66667 100644
--- a/components/Maps/InteractiveMap/HotelMapContent/index.tsx
+++ b/components/Maps/InteractiveMap/HotelMapContent/index.tsx
@@ -35,9 +35,9 @@ export default function HotelMapContent({
position={poi.coordinates}
anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
zIndex={activePoi === poi.name ? 2 : 0}
- onMouseEnter={() => onActivePoiChange?.(poi.name)}
+ onMouseEnter={() => onActivePoiChange?.(poi.name ?? null)}
onMouseLeave={() => onActivePoiChange?.(null)}
- onClick={() => toggleActivePoi(poi.name)}
+ onClick={() => toggleActivePoi(poi.name ?? "")}
>
({
name: poi.name,
@@ -215,8 +215,8 @@ export const pointOfInterestSchema = z
categoryName: poi.category.name,
group: getPoiGroupByCategoryName(poi.category.name),
coordinates: {
- lat: poi.location.latitude,
- lng: poi.location.longitude,
+ lat: poi.location?.latitude ?? 0,
+ lng: poi.location?.longitude ?? 0,
},
}))
@@ -463,7 +463,9 @@ export const getHotelDataSchema = z.object({
parking: z.array(parkingSchema),
pointsOfInterest: z
.array(pointOfInterestSchema)
- .transform((pois) => pois.sort((a, b) => a.distance - b.distance)),
+ .transform((pois) =>
+ pois.sort((a, b) => (a.distance ?? 0) - (b.distance ?? 0))
+ ),
ratings: ratingsSchema,
rewardNight: rewardNightSchema,
restaurantImages: facilitySchema.optional(),
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index eb31aacb6..31ffd63f1 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -30,6 +30,7 @@ import {
import { getVerifiedUser, parsedUser } from "../user/query"
import {
getBreakfastPackageInputSchema,
+ getCityCoordinatesInputSchema,
getHotelDataInputSchema,
getHotelsAvailabilityInputSchema,
getRatesInputSchema,
@@ -1078,4 +1079,20 @@ export const hotelQueryRouter = router({
)
}),
}),
+ map: router({
+ get: serviceProcedure
+ .input(getCityCoordinatesInputSchema)
+ .query(async function ({ input }) {
+ const apiKey = process.env.GOOGLE_STATIC_MAP_KEY
+ const { city } = input
+ const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(city)}&key=${apiKey}`
+
+ const response = await fetch(url)
+ const data = await response.json()
+ console.log("DATA_RESPONSE", data)
+ const { lat, lng } = data.results[0].geometry.location
+
+ return { lat, lng }
+ }),
+ }),
})
diff --git a/server/routers/hotels/utils.ts b/server/routers/hotels/utils.ts
index c3e785a59..3e5b5f5e4 100644
--- a/server/routers/hotels/utils.ts
+++ b/server/routers/hotels/utils.ts
@@ -12,13 +12,14 @@ import {
type Countries,
} from "./output"
-import type { Lang } from "@/constants/languages"
-import type { Endpoint } from "@/lib/api/endpoints"
import type { RequestOptionsWithOutBody } from "@/types/fetch"
import { PointOfInterestGroupEnum } from "@/types/hotel"
import { HotelLocation } from "@/types/trpc/routers/hotel/locations"
+import type { Lang } from "@/constants/languages"
+import type { Endpoint } from "@/lib/api/endpoints"
-export function getPoiGroupByCategoryName(category: string) {
+export function getPoiGroupByCategoryName(category: string | undefined) {
+ if (!category) return PointOfInterestGroupEnum.LOCATION
switch (category) {
case "Airport":
case "Bus terminal":
diff --git a/types/components/hotelReservation/selectHotel/map.ts b/types/components/hotelReservation/selectHotel/map.ts
index 490f8d06e..4ec21f86f 100644
--- a/types/components/hotelReservation/selectHotel/map.ts
+++ b/types/components/hotelReservation/selectHotel/map.ts
@@ -22,6 +22,7 @@ export interface SelectHotelMapProps {
mapId: string
hotels: HotelData[]
filterList: CategorizedFilters
+ cityCoordinates: Coordinates
}
type ImageSizes = z.infer