Adding Google Maps

Author: jondjones

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 # vercel
 .vercel
 .env
+
+# Local Netlify folder
+.netlify

component/ABComponent.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styles from './ABComponent.module.css'
+import styles from '../styles/ABComponent.module.css'
 
 const sectionStyle = (backgroundColor) => (
 {

component/Map.js

@@ -0,0 +1,32 @@
+import { useEffect, useState , useRef} from "react";
+import styles from '../styles/map.module.css';
+
+const Map = ({ mapCords }) => {
+    const ref = useRef();
+    const [map, setMap] = useState();
+
+    const ZOOM = 9;
+
+    useEffect(() => {
+      if (ref.current && !map) {
+        const newMap = new window.google.maps.Map(ref.current, {
+          zoom: ZOOM,
+          center: mapCords,
+        });
+
+        const mapOverlay = new google.maps.ImageMapType({
+          getTileUrl: function (coord, zoom) {
+            return `https://tiles.aqicn.org/tiles/usepa-aqi/${zoom}/${coord.x}/${coord.y}.png?token=${process.env.NEXT_PUBLIC_AQICN_API_KEY}`;
+          },
+          name: 'Air Quality',
+        });
+        newMap.overlayMapTypes.insertAt(0, mapOverlay);
+
+        setMap(newMap);
+      }
+    }, [ref, map, mapCords]);
+
+    return <div ref={ref} className={styles.map}></div>;
+  }
+
+export default Map;

component/MapContainer.js

@@ -0,0 +1,20 @@
+import Map from "../component/Map";
+import { Wrapper } from '@googlemaps/react-wrapper'
+
+import styles from '../styles/map.module.css';
+
+const MapContainer = ({ mapCords, address }) => {
+
+  const apiKey = process.env.NEXT_PUBLIC_GOOGLE_API_KEY;
+  console.log('MapContainer', apiKey, mapCords)
+
+  return (
+      <section className={styles.container}>
+        <Wrapper apiKey={apiKey}>
+            <Map mapCords={mapCords} />
+        </Wrapper>
+      </section>
+    );
+}
+
+export default MapContainer;

functions/admin.js

@@ -0,0 +1,32 @@
+import { MiddlewareRequest } from '@netlify/next';
+
+export async function middleware(nextRequest) {
+
+  if (nextRequest.nextUrl.pathname !== '/signup') {
+    return;
+  }
+
+  const middlewareRequest = new MiddlewareRequest(nextRequest);
+  const response = await middlewareRequest.next();
+
+  const GOOGLE_API_KEY = Deno.env.get('NEXT_PUBLIC_GOOGLE_API_KEY');
+  const address = nextRequest.cookies.get('state');
+
+  const api = new URL('https://maps.googleapis.com/maps/api/geocode/json');
+
+  api.searchParams.set('address', address);
+  api.searchParams.set('key', GOOGLE_API_KEY);
+
+  const res = await fetch(api.toString());
+  const data = await res.json();
+  const [result] = data.results;
+
+  if (!result || !result.geometry || !result.geometry.location) {
+    return;
+  }
+
+  response.setPageProp('address', address);
+  response.setPageProp('mapCords', result.geometry.location);
+
+  return response;
+}

functions/data.json

@@ -1,6 +1,8 @@
 [build]
-    command = "npm run build"
-    functions = "dist-functions"
+command = "npm run build"
+
+[build.environment]
+NEXT_USE_NETLIFY_EDGE = "true"
 
 [[plugins]]
-    package = "@netlify/plugin-nextjs"
+package = "@netlify/plugin-nextjs"

middleware.js

@@ -13,5 +13,5 @@ module.exports = {
   },
   images: {
     domains: ['localhost', 'optimizely-demo.netlify.app'],
-  },
+  }
 }