refactor(map): google maps api key passing

GaloyMoney · Feb 10, 2024 · 5b074dd · 5b074dd
1 parent d3be4fd
commit 5b074dd
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 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,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,
   })