refactor(map): google maps api key passing (#3970)

* refactor(map): google maps api key passing * chore: view port for mobile devices
GaloyMoney · Feb 10, 2024 · f04859c · f04859c
1 parent d3be4fd
commit f04859c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git 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
@@ -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
@@ -4,21 +4,22 @@ 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
   >(null)
+  const [viewportHeight, setViewportHeight] = useState("100vh")
   const [currentLocation, setCurrentLocation] = useState({
     coordinates: {
       lat: DEFAULT_LAT,
@@ -27,6 +28,15 @@ export default function MapComponent({ mapData }: MapComponentProps) {
     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,
@@ -73,7 +83,7 @@ export default function MapComponent({ mapData }: MapComponentProps) {
   }, [])
 
   const { isLoaded } = useLoadScript({
-    googleMapsApiKey: env.NEXT_PUBLIC_MAP_API_KEY,
+    googleMapsApiKey,
     libraries: libraries as any,
   })
 
@@ -159,7 +169,14 @@ export default function MapComponent({ mapData }: MapComponentProps) {
   }
 
   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 }: MapComponentProps) {
         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 }: MapComponentProps) {
           />
         )}
       </GoogleMap>
-    </>
+    </div>
   )
 }