refactor(LocationStep): adding marker to dynamic map

multei · Nov 4, 2020 · ae6a61e · ae6a61e
1 parent 1ac8434
commit ae6a61e
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 18 deletions.
diff --git a/src/components/GoogleMaps/index.js b/src/components/GoogleMaps/index.js
@@ -1,5 +1,23 @@
 import React, { useState } from "react"
 import GoogleMapReact from "google-map-react"
+import Button from "@material-ui/core/Button"
+import TextField from "@material-ui/core/TextField"
+import MapsMarker from "../../../src/images/maps-marker.png"
+
+const AnyReactComponent = () => (
+  <div
+    style={{
+      zIndex: 3,
+      left: "50%",
+      top: "50%",
+      width: "100px",
+      height: "100px",
+      position: "absolute",
+    }}
+  >
+    <img src={MapsMarker} alt="Logo da aplicação" width="50px" height="50px" />
+  </div>
+)
 
 export const GoogleMaps = () => {
   const zoom = 18
@@ -30,23 +48,24 @@ export const GoogleMaps = () => {
 
   return (
     <div>
-      <div style={{ height: "100vh", width: "100%" }}>
+      <div style={{ height: "70vh", width: "100%" }}>
         <div>
-          <input
-            type="text"
+          <TextField
             value={address}
             onChange={(e) => setAddress(e.target.value)}
-            size="70"
+            inputProps={{ size: 90 }}
           />
-          <button onClick={locate}>localizar</button>
+          <Button variant="contained" onClick={locate}>
+            Localizar
+          </Button>
         </div>
         <GoogleMapReact
           bootstrapURLKeys={{ key: process.env.GATSBY_GOOGLE_MAPS_JS_API_KEY }}
           center={position}
           defaultZoom={zoom}
           onDragEnd={getAddress}
         ></GoogleMapReact>
-        {/* <AnyReactComponent /> */}
+        {<AnyReactComponent />}
       </div>
     </div>
   )

diff --git a/src/components/LocationStep/index.js b/src/components/LocationStep/index.js
@@ -84,27 +84,31 @@ const LocationStep = (props) => {
       <Divider />
       {currentPosition && (
         <div style={{ position: "relative" }}>
-          {loadingMap && (
+          {/*loadingMap && (
             <Skeleton
               style={{ position: "absolute", zIndex: 2 }}
               variant="rect"
               width={"100%"}
               height={157}
             />
-          )}
+        )*/}
 
-          <EmbedGoogleMap
-            coordinates={`${currentPosition.coords.latitude},${currentPosition.coords.longitude}`}
-            onLoad={onMapLoaded}
-            style={{ height: 157, width: "100%" }}
-          />
+          {!googleMapsJsToggle && (
+            <EmbedGoogleMap
+              coordinates={`${currentPosition.coords.latitude},${currentPosition.coords.longitude}`}
+              onLoad={onMapLoaded}
+              style={{ height: 157, width: "100%" }}
+            />
+          )}
 
           {googleMapsJsToggle && <GoogleMaps />}
 
-          <Paragraph variant={"body2"}>
-            Se estiver tudo certo com esta localização, você pode finalizar a
-            denúncia.
-          </Paragraph>
+          {!googleMapsJsToggle && (
+            <Paragraph variant={"body2"}>
+              Se estiver tudo certo com esta localização, você pode finalizar a
+              denúncia.
+            </Paragraph>
+          )}
         </div>
       )}
 

diff --git a/src/hooks/useFeatureToggle.js b/src/hooks/useFeatureToggle.js
@@ -42,7 +42,7 @@ const useFeatureToggle = (key) => {
       PARKING_REPORT: process.env.GATSBY_TOGGLE_PARKING_REPORT,
       PLATE_CONFIRMATION_STEP:
         process.env.GATSBY_TOGGLE_PLATE_CONFIRMATION_STEP,
-      GOOGLE_MAPS_JS: process.env.GATSBY_GOOGLE_MAPS_JS,
+      GOOGLE_MAPS_JS: process.env.GATSBY_TOGGLE_GOOGLE_MAPS_JS,
     }
 
     if (keys[key]) {

diff --git a/src/images/maps-marker.png b/src/images/maps-marker.png