feat(maps): init google maps

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",

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",

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",

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";

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} />;
+}

src/layout.js

@@ -127,7 +127,7 @@ export default function Layout({ children }) {
           styles={
             navOpen && {
               body: {
-                "overflow-y": "hidden"
+                overflowY: "hidden"
               }
             }
           }

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>
   );
 }