New Map Component working with Basic instructions

package.json

@@ -9,8 +9,10 @@
     "dotenv": "^8.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-google-maps": "^9.4.5",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Map/index.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { MapContainer } from "./styled";
+import { GoogleMap, withScriptjs, withGoogleMap } from "react-google-maps";
+
+const GMap = () => (
+  <GoogleMap 
+    defaultZoom={16}
+    defaultCenter={{ lat: -23.604710, lng: -46.634330}}
+  />
+)
+const WrappedMap = withScriptjs(withGoogleMap(GMap));
+
+const Map = () => (
+  <MapContainer>
+    <WrappedMap
+      googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${process.env.REACT_APP_GOOGLE_KEY}`}
+      loadingElement={<div style={{height:`100%`}}/>}
+      containerElement={<div style={{height:`100%`}}/>}
+      mapElement={<div style={{height:`100%`}}/>}
+    />
+  </MapContainer>
+)
+
+export default Map;

src/components/Map/styled.jsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const MapContainer = styled.div`
+    width: 100vw;
+    height: 100vw;
+`;

src/index.js

@@ -5,9 +5,8 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>,
+,
   document.getElementById('root')
 );
 

src/pages/home/index.jsx

@@ -1,9 +1,8 @@
 import React from "react";
+import Map from "../../components/Map";
 
 const Home = () => (
-    <div>
-        hello world bike de boa!
-    </div>
+  <Map />
 )
 
 export default Home;