From 5b074dd6481c8b8bac5bbd7fa52be57e9002d74b Mon Sep 17 00:00:00 2001
From: Siddharth Tiwari <siddharthtiwarikreplind@gmail.com>
Date: Sat, 10 Feb 2024 11:37:19 +0530
Subject: [PATCH 1/2] refactor(map): google maps api key passing

---
 apps/map/BUCK                     | 1 +
 apps/map/app/page.tsx             | 4 +++-
 apps/map/components/map/index.tsx | 6 +++---
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/map/BUCK b/apps/map/BUCK
index 83780d50c2..b904f516a9 100644
--- a/apps/map/BUCK
+++ b/apps/map/BUCK
@@ -37,6 +37,7 @@ filegroup(
     name = "src",
     srcs = glob([
     "app/**",
+    "public/**",
     "theme/**",
     "services/**",
     "components/**",
diff --git a/apps/map/app/page.tsx b/apps/map/app/page.tsx
index 0d819695f2..6c6c2f2da3 100644
--- a/apps/map/app/page.tsx
+++ b/apps/map/app/page.tsx
@@ -1,4 +1,5 @@
 import MapComponent from "@/components/map"
+import { env } from "@/env"
 import { businessMapMarkers } from "@/services/galoy/graphql/queries/business-map-marker"
 import Image from "next/image"
 
@@ -8,12 +9,13 @@ export default async function Home() {
     return <main>{mapData.message}</main>
   }
 
+  const googleMapsApiKey = env.NEXT_PUBLIC_MAP_API_KEY 
   return (
     <main>
       <div className="absolute ml-1 mt-1 rounded-xl bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10  z-10">
         <Image width={130} height={130} src={"/logo.svg"} alt="Blink Logo" />
       </div>
-      <MapComponent mapData={mapData} />
+      <MapComponent googleMapsApiKey={googleMapsApiKey} mapData={mapData} />
     </main>
   )
 }
diff --git a/apps/map/components/map/index.tsx b/apps/map/components/map/index.tsx
index 9e85f41aa2..8e740afc63 100644
--- a/apps/map/components/map/index.tsx
+++ b/apps/map/components/map/index.tsx
@@ -4,17 +4,17 @@ import { GoogleMap, MarkerF, InfoWindow, useLoadScript } from "@react-google-map
 import { BusinessMapMarkersQuery } from "@/services/galoy/graphql/generated"
 import Link from "next/link"
 import { theme } from "./map-theme"
-import { env } from "@/env"
 import LocationIcon from "../logo/location"
 import { SuggestMapFormSheet } from "./suggest-form"
 
 type MapComponentProps = {
   mapData: BusinessMapMarkersQuery["businessMapMarkers"]
+  googleMapsApiKey: string
 }
 const DEFAULT_LAT = 13.7942
 const DEFAULT_LNG = -88.8965
 
-export default function MapComponent({ mapData }: MapComponentProps) {
+export default function MapComponent({ mapData, googleMapsApiKey }: MapComponentProps) {
   const mapRef = useRef<google.maps.Map>()
   const [selectedMarker, setSelectedMarker] = useState<
     BusinessMapMarkersQuery["businessMapMarkers"][number] | null
@@ -73,7 +73,7 @@ export default function MapComponent({ mapData }: MapComponentProps) {
   }, [])
 
   const { isLoaded } = useLoadScript({
-    googleMapsApiKey: env.NEXT_PUBLIC_MAP_API_KEY,
+    googleMapsApiKey,
     libraries: libraries as any,
   })
 

From 241383c37936abc233adc350c9286a06f6c071c8 Mon Sep 17 00:00:00 2001
From: Siddharth Tiwari <siddharthtiwarikreplind@gmail.com>
Date: Sat, 10 Feb 2024 12:47:41 +0530
Subject: [PATCH 2/2] chore: view port for mobile devices

---
 apps/map/components/map/index.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/map/components/map/index.tsx b/apps/map/components/map/index.tsx
index 8e740afc63..df1e8a833c 100644
--- a/apps/map/components/map/index.tsx
+++ b/apps/map/components/map/index.tsx
@@ -19,6 +19,7 @@ export default function MapComponent({ mapData, googleMapsApiKey }: MapComponent
   const [selectedMarker, setSelectedMarker] = useState<
     BusinessMapMarkersQuery["businessMapMarkers"][number] | null
   >(null)
+  const [viewportHeight, setViewportHeight] = useState("100vh")
   const [currentLocation, setCurrentLocation] = useState({
     coordinates: {
       lat: DEFAULT_LAT,
@@ -27,6 +28,15 @@ export default function MapComponent({ mapData, googleMapsApiKey }: MapComponent
     userAllowedLocation: false,
   })
 
+  useEffect(() => {
+    const calculateViewportHeight = () => {
+      setViewportHeight(`${window.innerHeight}px`)
+    }
+    calculateViewportHeight()
+    window.addEventListener("resize", calculateViewportHeight)
+    return () => window.removeEventListener("resize", calculateViewportHeight)
+  }, [])
+
   const [draggablePin, setDraggablePin] = useState({
     coordinates: { lat: 0, lng: 0 },
     visible: false,
@@ -159,7 +169,14 @@ export default function MapComponent({ mapData, googleMapsApiKey }: MapComponent
   }
 
   return (
-    <>
+    <div
+      style={{
+        position: "relative",
+        height: viewportHeight,
+        width: "100vw",
+        overflow: "hidden",
+      }}
+    >
       {draggablePin.visible && (
         <div className="absolute right-2 top-2 z-10 w-40">
           <div className="bg-white text-black p-2 rounded-md text-sm drop-shadow-2xl">
@@ -229,7 +246,7 @@ export default function MapComponent({ mapData, googleMapsApiKey }: MapComponent
         zoom={14}
         center={currentLocation.coordinates}
         mapTypeId={google.maps.MapTypeId.ROADMAP}
-        mapContainerStyle={{ width: "100vw", height: "100vh" }}
+        mapContainerStyle={{ height: "100%", width: "100%" }}
       >
         {mapData.map((marker, index) => (
           <MarkerF
@@ -296,7 +313,7 @@ export default function MapComponent({ mapData, googleMapsApiKey }: MapComponent
           />
         )}
       </GoogleMap>
-    </>
+    </div>
   )
 }