From 3375c58668fa760891e4cdb20f7f62cc68b54d71 Mon Sep 17 00:00:00 2001
From: Tadeu Saldanha <tadeusaldanha@gmail.com>
Date: Tue, 26 May 2020 09:29:02 -0300
Subject: [PATCH] Added new Map options and header component

---
 jsconfig.json                   |  6 ++++++
 src/components/Header/index.jsx |  0
 src/components/Map/index.jsx    | 34 +++++++++++++++++++++++++++------
 src/components/Map/styled.jsx   |  2 +-
 4 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 jsconfig.json
 create mode 100644 src/components/Header/index.jsx

diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..ec9aa3f
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}
\ No newline at end of file
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Map/index.jsx b/src/components/Map/index.jsx
index b9f3aa6..72c78b8 100644
--- a/src/components/Map/index.jsx
+++ b/src/components/Map/index.jsx
@@ -1,12 +1,34 @@
 import React from "react";
 import { MapContainer } from "./styled";
-import { GoogleMap, withScriptjs, withGoogleMap } from "react-google-maps";
+import { 
+  GoogleMap,
+  withScriptjs,
+  withGoogleMap, 
+  Marker, 
+  BicyclingLayer 
+} from "react-google-maps";
+
+const MapCenter = { 
+  lat: -23.604710,
+  lng: -46.634330,
+}
+
+const defaultMapOptions = { 
+  fullscreenControl: false,
+  mapTypeControl: false,
+  zoomControl: false,
+  streetViewControl: false,
+}
 
 const GMap = () => (
   <GoogleMap 
     defaultZoom={16}
-    defaultCenter={{ lat: -23.604710, lng: -46.634330}}
-  />
+    defaultCenter={MapCenter}
+    defaultOptions={defaultMapOptions}
+  >
+    <Marker position={MapCenter} />
+    <BicyclingLayer autoUpdate />
+  </GoogleMap>
 )
 const WrappedMap = withScriptjs(withGoogleMap(GMap));
 
@@ -14,9 +36,9 @@ 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%`}}/>}
+      loadingElement={<div style={{height:`100vh`}}/>}
+      containerElement={<div style={{height:`100vh`}}/>}
+      mapElement={<div style={{height:`100vh`}}/>}
     />
   </MapContainer>
 )
diff --git a/src/components/Map/styled.jsx b/src/components/Map/styled.jsx
index 7daa302..3a8c2ea 100644
--- a/src/components/Map/styled.jsx
+++ b/src/components/Map/styled.jsx
@@ -2,5 +2,5 @@ import styled from "styled-components";
 
 export const MapContainer = styled.div`
     width: 100vw;
-    height: 100vw;
+    height: 100vh;
 `;
\ No newline at end of file