fixed map (#629)

Author: jeromehardaway

env.local

@@ -1 +1,2 @@
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-WSXY307CRR
+NEXT_PUBLIC_GOOGLE_MAPS_KEY=AIzaSyB3mMuvl8IUlviRZiizBiX7uhsdIqunx94

env.production

@@ -1 +1,2 @@
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-WSXY307CRR
+NEXT_PUBLIC_GOOGLE_MAPS_KEY=AIzaSyB3mMuvl8IUlviRZiizBiX7uhsdIqunx94

package-lock.json

@@ -56,7 +56,7 @@
     "@playwright/test": "^1.37.1",
     "@tailwindcss/typography": "^0.5.2",
     "@types/cookie": "^0.5.1",
-    "@types/google.maps": "^3.49.1",
+    "@types/google.maps": "^3.58.1",
     "@types/jsonwebtoken": "^8.5.8",
     "@types/marked": "^4.0.3",
     "@types/node": "^18.0.0",

package.json

@@ -11,14 +11,14 @@ type MapProps = google.maps.MapOptions;
 const MyMap: React.FC<MapProps> = ({ ...options }) => {
     return (
         <Wrapper
-            apiKey="AIzaSyB3mMuvl8IUlviRZiizBiX7uhsdIqunx94"
+            apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY || ''}
             render={render}
         >
             <Map {...options}>
-                <Marker position={options.center} />
+                {options.center && <Marker position={options.center} />}
             </Map>
         </Wrapper>
     );
 };
 
-export default MyMap;
+export default MyMap;

src/components/ui/google-map/index.tsx

@@ -16,7 +16,13 @@ type TProps = TSection & {
     };
 };
 
-const ContactInfo = ({ data: { section_title, items, location } }: TProps) => {
+const ContactInfo = ({ data: { section_title, items } }: TProps) => {
+    // Hardcoded Atlanta coordinates
+    const atlantaLocation = {
+        latitude: 33.7488,
+        longitude: -84.3877
+    };
+
     return (
         <Section className="contact-info-area" space="none">
             <div className="tw-container">
@@ -61,26 +67,24 @@ const ContactInfo = ({ data: { section_title, items, location } }: TProps) => {
                         </div>
                     ))}
                 </motion.div>
-                {location && (
-                    <motion.div
-                        className="tw-h-[300px] lg:tw-h-[400px]"
-                        initial="offscreen"
-                        whileInView="onscreen"
-                        viewport={{ once: true, amount: 0.4 }}
-                        variants={scrollUpVariants}
-                    >
-                        <GoogleMap
-                            center={{
-                                lat: location.latitude,
-                                lng: location.longitude,
-                            }}
-                            zoom={14}
-                        />
-                    </motion.div>
-                )}
+                <motion.div
+                    className="tw-h-[300px] lg:tw-h-[400px]"
+                    initial="offscreen"
+                    whileInView="onscreen"
+                    viewport={{ once: true, amount: 0.4 }}
+                    variants={scrollUpVariants}
+                >
+                    <GoogleMap
+                        center={{
+                            lat: atlantaLocation.latitude,
+                            lng: atlantaLocation.longitude,
+                        }}
+                        zoom={14}
+                    />
+                </motion.div>
             </div>
         </Section>
     );
 };
 
-export default ContactInfo;
+export default ContactInfo;

src/containers/contact-info/layout-02/index.tsx

@@ -1,3 +1,21 @@
+/// <reference types="@types/google.maps" />
+
+declare global {
+    interface Window {
+        google: typeof google;
+    }
+}
+
+// Google Maps Types
+export interface MapType extends google.maps.MapOptions {
+    onClick?: (e: google.maps.MapMouseEvent) => void;
+    children?: React.ReactNode;
+}
+
+export interface MarkerType extends google.maps.MarkerOptions {
+    onClick?: () => void;
+}
+
 export type IDType = string | number;
 
 export interface ImageType {

src/utils/types.ts

@@ -32,8 +32,17 @@
       "@utils/*": ["utils/*"],
       "@widgets/*": ["components/widgets/*"],
       "@fonts/*": ["public/fonts/*"]
-    }
+    },
+    "types": ["google.maps"]  // Add this line
   },
-  "include": ["next-env.d.ts", "next.config.js", "src/**/*.ts", "src/**/*.tsx", "tailwind.config.js", "postcss.config.js", "next-sitemap.config.js"],
+  "include": [
+    "next-env.d.ts", 
+    "next.config.js", 
+    "src/**/*.ts", 
+    "src/**/*.tsx", 
+    "tailwind.config.js", 
+    "postcss.config.js", 
+    "next-sitemap.config.js"
+  ],
   "exclude": ["node_modules"]
-}
+}