feat(maps): init google maps

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