From 3e5c6b16a05c88b90fa05ebec9697a5d7cd4028f Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Thu, 21 Jan 2021 21:17:12 +0000
Subject: [PATCH] feat(maps): init google maps

---
 gatsby-config.js        |  2 ++
 package-lock.json       |  5 +++++
 package.json            |  1 +
 src/components/index.js |  1 +
 src/components/map.js   | 33 +++++++++++++++++++++++++++++++++
 src/layout.js           |  2 +-
 src/pages/contact.js    | 22 ++++++++++++++++++++++
 7 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/components/map.js

diff --git a/gatsby-config.js b/gatsby-config.js
index 4d6c306..84b6afa 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -1,10 +1,12 @@
 const path = require("path");
+const { GMAPS_APIKEY } = process.env;
 
 module.exports = {
   siteMetadata: {
     title: `ABC Project Design`,
     description: `Easy as ABC`,
     keywords: `Foo bar baz`,
+    secrets: { GMAPS_APIKEY },
     navData: [
       {
         title: "Home",
diff --git a/package-lock.json b/package-lock.json
index 063b889..5636954 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9663,6 +9663,11 @@
         }
       }
     },
+    "google-maps-react": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz",
+      "integrity": "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ=="
+    },
     "got": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
diff --git a/package.json b/package.json
index 3fcb876..377e328 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "gatsby-plugin-sharp": "^2.11.2",
     "gatsby-source-filesystem": "^2.8.1",
     "gatsby-transformer-sharp": "^2.9.0",
+    "google-maps-react": "^2.0.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
diff --git a/src/components/index.js b/src/components/index.js
index ef60197..b8b941b 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -9,6 +9,7 @@ export { default as Icon } from "./icon";
 export { default as IconWithContent } from "./icon-with-content";
 export { default as InputText } from "./input-text";
 export { default as Link } from "./link";
+export { default as Map } from "./map";
 export { default as MenuButton } from "./menu-button";
 export { default as NavItem } from "./nav-item";
 export { default as NavLink } from "./nav-link";
diff --git a/src/components/map.js b/src/components/map.js
new file mode 100644
index 0000000..12ede31
--- /dev/null
+++ b/src/components/map.js
@@ -0,0 +1,33 @@
+import React from "react";
+import { useStaticQuery, graphql } from "gatsby";
+import { GoogleApiWrapper, Map } from "google-maps-react";
+
+const MapContainer = ({ children, google, height = "300px", ...other }) => (
+  <Map
+    style={{ height }}
+    containerStyle={{ position: "relative", height }}
+    google={google}
+    {...other}
+  >
+    {children}
+  </Map>
+);
+
+export default function CustomMap({ ...other }) {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          secrets {
+            GMAPS_APIKEY
+          }
+        }
+      }
+    }
+  `);
+
+  const Wrapper = GoogleApiWrapper({
+    apiKey: data.site.siteMetadata.secrets.GMAPS_APIKEY
+  })(MapContainer);
+  return <Wrapper {...other} />;
+}
diff --git a/src/layout.js b/src/layout.js
index 0c57d12..82d0087 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -127,7 +127,7 @@ export default function Layout({ children }) {
           styles={
             navOpen && {
               body: {
-                "overflow-y": "hidden"
+                overflowY: "hidden"
               }
             }
           }
diff --git a/src/pages/contact.js b/src/pages/contact.js
index 3243aa2..0caaa57 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { graphql } from "gatsby";
+import { Marker } from "google-maps-react";
 import Layout from "../layout";
 import {
   Button,
@@ -8,6 +9,7 @@ import {
   IconWithContent,
   InputText,
   Link,
+  Map,
   Section,
   Text
 } from "../components";
@@ -129,6 +131,26 @@ export default function Index({ data }) {
           )}
         </div>
       </Section>
+      <Map
+        initialCenter={{
+          lat: 51.5614,
+          lng: 0.1071
+        }}
+        zoom={10}
+        scrollwheel={false}
+        draggable={false}
+        keyboardShortcuts={false}
+        disableDoubleClickZoom={false}
+        zoomControl={false}
+        mapTypeContol={false}
+        scaleControl={false}
+        streetViewControl={false}
+        panControl={false}
+        rotateControl={false}
+        fullscreenControl={false}
+      >
+        <Marker title={"ABC Project Design Ltd"} />
+      </Map>
     </Layout>
   );
 }