try to implement map icon

client/package.json

@@ -7,6 +7,7 @@
     "node-sass": "^4.11.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-google-location": "^1.2.2",
     "react-redux": "^7.0.2",
     "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8",

client/src/components/MainContainer.js

@@ -3,6 +3,7 @@ import Map from "./Map";
 import { connect } from "react-redux";
 import { getMapDetails } from "../actions";
 import Navigation from "./Navigation/Navigation";
+import PanelAction from "./Panel/PanelAction";
 
 class MainContent extends Component {
   componentDidMount() {
@@ -13,6 +14,7 @@ class MainContent extends Component {
     return (
       <div className="main-content">
         <Navigation />
+        <PanelAction />
         <Map mapInfo={this.props.mapInfo}/>
       </div>
     );

client/src/components/Map.js

@@ -1,54 +1,115 @@
 import React, { Component } from "react";
-import { Icon } from "semantic-ui-react";
-import GoogleMapReact from 'google-map-react';
-
-const Marker = () => <div className="icon-wrapper"><i className="fas fa-battery-empty power-out"></i></div>;
+import batteryIcon from "../assets/battery-empty.svg";
 
 class Map extends Component {
-
-
-  render() {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  componentDidMount() {
+    this.renderMap();
+  }
+  renderMap = () => {
+    loadScript(
+      "https://maps.googleapis.com/maps/api/js?key=AIzaSyCvdgUHoWt0MgqmWmcw-IcMAXMvRLWxcpE&callback=initMap"
+    );
+    loadScriptAgain(
+      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"
+    );
+    window.initMap = this.initMap;
+  };
+  /* Initialize Map Function */
+  initMap = () => {
+    //var caracas = new window.google.maps.LatLng(10.4806, -66.9036);
+    var map = new window.google.maps.Map(document.getElementById("map"), {
+      center: {
+        //Caracas, Venezuela
+        lat: 10.4806,
+        lng: -66.9036
+      },
+      zoom: 8
+    });
     var locations = [
-      {lat: -31.563910, lng: 147.154312},
-      {lat: -33.718234, lng: 150.363181},
-      {lat: -33.727111, lng: 150.371124},
-      {lat: -33.848588, lng: 151.209834},
-      {lat: -33.851702, lng: 151.216968},
-      {lat: -34.671264, lng: 150.863657},
-      {lat: -35.304724, lng: 148.662905},
-      {lat: -36.817685, lng: 175.699196},
-      {lat: -36.828611, lng: 175.790222},
-      {lat: -37.750000, lng: 145.116667},
-      {lat: -37.759859, lng: 145.128708},
-      {lat: -37.765015, lng: 145.133858},
-      {lat: -37.770104, lng: 145.143299},
-      {lat: -37.773700, lng: 145.145187},
-      {lat: -37.774785, lng: 145.137978},
-      {lat: -37.819616, lng: 144.968119},
-      {lat: -38.330766, lng: 144.695692},
-      {lat: -39.927193, lng: 175.053218},
-      {lat: -41.330162, lng: 174.865694},
-      {lat: -42.734358, lng: 147.439506},
-      {lat: -42.734358, lng: 147.501315},
-      {lat: -42.735258, lng: 147.438000},
-      {lat: -43.999792, lng: 170.463352}
-    ]
+      { lat: -31.56391, lng: 147.154312 },
+      { lat: -33.718234, lng: 150.363181 },
+      { lat: -33.727111, lng: 150.371124 },
+      { lat: -33.848588, lng: 151.209834 },
+      { lat: -33.851702, lng: 151.216968 },
+      { lat: -34.671264, lng: 150.863657 },
+      { lat: -35.304724, lng: 148.662905 },
+      { lat: -36.817685, lng: 175.699196 },
+      { lat: -36.828611, lng: 175.790222 },
+      { lat: -37.75, lng: 145.116667 },
+      { lat: -37.759859, lng: 145.128708 },
+      { lat: -37.765015, lng: 145.133858 },
+      { lat: -37.770104, lng: 145.143299 },
+      { lat: -37.7737, lng: 145.145187 },
+      { lat: -37.774785, lng: 145.137978 },
+      { lat: -37.819616, lng: 144.968119 },
+      { lat: -38.330766, lng: 144.695692 },
+      { lat: -39.927193, lng: 175.053218 },
+      { lat: -41.330162, lng: 174.865694 },
+      { lat: -42.734358, lng: 147.439506 },
+      { lat: -42.734358, lng: 147.501315 },
+      { lat: -42.735258, lng: 147.438 },
+      { lat: -43.999792, lng: 170.463352 }
+    ];
+    // Create an array of alphabetical characters used to label the markers.
+    var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 
+    // Add some markers to the map.
+    // Note: The code uses the JavaScript Array.prototype.map() method to
+    // create an array of markers based on a given "locations" array.
+    // The map() method here has nothing to do with the Google Maps API.
+    var markers = locations.map(function(location, i) {
+      return new window.google.maps.Marker({
+        position: location,
+        label: labels[i % labels.length],
+        icon: batteryIcon,
+        size: new window.google.maps.Size(25, 25)
+      });
+    });
+    // Add a marker clusterer to manage the markers.
+    var markerCluster = new window.MarkerClusterer(map, markers, {
+      imagePath:
+        "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/"
+    });
+  };
+  render() {
     return (
-      <main className="map">
-        <GoogleMapReact
-          bootstrapURLKeys={{key: "AIzaSyCvdgUHoWt0MgqmWmcw-IcMAXMvRLWxcpE"}}
-          defaultCenter={[10.4806, -66.9036]}
-          defaultZoom={8}
-        >
-          {locations.map(pin => {
-            return <Marker lat={pin.lat} lng={pin.lng} className="pleasework"/>
-          })}
-        </GoogleMapReact>
+      <main>
+        <div id="map" />
       </main>
     );
   }
 }
 
+/*
+Function to load
+   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
+    async defer></script>
+into react
+*/
+function loadScript(url) {
+  let scriptIndex = window.document.getElementsByTagName("script")[0];
+  let script = window.document.createElement("script");
+  script.src = url;
+  script.async = true;
+  script.defer = true;
+  scriptIndex.parentNode.insertBefore(script, scriptIndex);
+}
+function loadScriptAgain(url) {
+  let scriptIndex = window.document.getElementsByTagName("script")[1];
+  let script = window.document.createElement("script");
+  script.src = url;
+  scriptIndex.parentNode.insertBefore(script, scriptIndex);
+}
+/*
+  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
+    async defer></script>
+ 
+  <script src ="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
+
+*/
 
 export default Map;

client/src/components/Navigation/Navigation.js

@@ -1,36 +1,35 @@
-import React, {Component} from 'react'
-import { GoogleComponent } from 'react-google-location' 
-const API_KEY = 'AIzaSyCvdgUHoWt0MgqmWmcw-IcMAXMvRLWxcpE'
+import React, { Component } from "react";
+import { GoogleComponent } from "react-google-location";
+const API_KEY = "AIzaSyCvdgUHoWt0MgqmWmcw-IcMAXMvRLWxcpE";
 
 class Navigation extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-          place: null,
-        };
-      }
-    render() {
-        return (
-            <div className="navigation">
-                <div className="navigation__wrapper">
-                    <div className="serchbar">
-                    <GoogleComponent
-                        apiKey={API_KEY}
-                        language={'en'}
-                        country={'country:in|country:us'}
-                        coordinates={true}
-                        locationBoxStyle={'custom-style'}
-                        locationListStyle={'custom-style-list'}
-                        onChange={(e) => { this.setState({ place: e }) }} />
-                    </div>
-                </div>
-            </div>
-        )
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      place: null
+    };
+  }
+  render() {
+    return (
+      <div className="navigation">
+        <div className="navigation__wrapper">
+          <div className="serchbar">
+            <GoogleComponent
+              apiKey={API_KEY}
+              language={"en"}
+              country={"country:in|country:us"}
+              coordinates={true}
+              locationBoxStyle={"custom-style"}
+              locationListStyle={"custom-style-list"}
+              onChange={e => {
+                this.setState({ place: e });
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default Navigation;
-
-
-
-

client/src/components/Panel/PanelAction.js

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+
+class PanelAction extends Component {
+    render() {
+        return (
+            <div className="panel-action">
+                <div className="panel-action__wrapper">
+                    <button className="btn action-btn">Report</button>
+                    <button className="btn action-btn">See all incident</button>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default PanelAction;

client/src/styles/components/map.scss

@@ -1,4 +1,4 @@
-.map {
+#map {
     width: 100vw;
     height: 100vh;
 }
@@ -9,6 +9,10 @@
     justify-content: center;
     align-content: center;
 }
+
+.google-covert {
+    background: white;
+}
 .power-out {
     padding: 5px;
     color: white;

client/src/styles/components/panelAction.scss

@@ -0,0 +1,29 @@
+.panel-action {
+    position: fixed;
+    z-index: 999;
+    background: black;
+    margin-top: 80px;
+    padding: 20px;
+    border-radius: 20px;
+    margin-left: 10px;
+
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .btn {
+        padding: 1px solid gray;
+        padding: 10px 20px;
+        cursor: pointer;
+        background: transparent;
+        border-radius: 40px;
+        color: white;
+        font-size: 1.2em;
+        margin-top: 20px;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+}

client/src/styles/main.scss

@@ -5,4 +5,5 @@
 
 //components styling
 @import 'components/map';
-@import 'components/navigation';
+@import 'components/navigation';
+@import 'components/panelAction';