feat: 구글 지도 API 연동

 import React, {useEffect} from "react";
 import React, {useEffect} from "react";
 import Dimensions from "react-dimensions";
 import Dimensions from "react-dimensions";
+import res from './res';
 
 
-let map, infoWindow;
+let map;
+let markers = [];
+let infoWindow;
 
 
-const GoogleMap = (props) => {
-  useEffect(() => {
-    console.log('mount');
-    const { google } = window;
+const getGroupUrlStringByGroup = group => {
+  if (group === "renting") {
+    // 사용중
+    return "_inuse";
+  } else if (group === "ready") {
+    // 대기중
+    return "";
+  } else if (group === "target") {
+    // 수거대상
+    return "_pickup";
+  } else if (group === "collect") {
+    // 수거
+    return "_deactive";
+  }
+};
+
+const getBatteryUrlStringByBattery = battery => {
+  if (battery >= 0 && battery < 25) {
+    return "0-25";
+  } else if (battery >= 25 && battery < 50) {
+    return "25-50";
+  } else if (battery >= 50 && battery < 75) {
+    return "50-75";
+  }
+  return "75-100";
+};
+
+class GoogleMap extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      kickboards: []
+    };
+  }
+
+  componentDidMount() {
+    // fetch('http://1.201.143.67:5901/kickboard/all')
+    //   .then(r => r.json())
+    //   .then(d => {
+    //     if(!d.success || !d.data.length) return;
+    //
+    //     console.log(d.data)
+    //     this.setState({
+    //       kickboards: d.data
+    //     })
+    //   })
+    //   .then(d => {
+    //     const { google } = window;
+    //
+    //     infoWindow = new window.google.maps.InfoWindow({});
+    //
+    //     map = new google.maps.Map(document.getElementById("map"), {
+    //       zoom: 11,
+    //       center: {lat: -34.397, lng: 150.644},
+    //       disableDefaultUI: true,
+    //       zoomControl: true
+    //     });
+    //
+    //     google.maps.event.addListenerOnce(map, "idle", () => {
+    //       this.getCurrentLocation();
+    //     });
+    //   })
+    //   .catch(err => console.log(err));
+
+    const response = JSON.parse(res);
+    this.setState({
+      kickboards: response.data
+    });
 
 
+    const { google } = window;
     infoWindow = new window.google.maps.InfoWindow({});
     infoWindow = new window.google.maps.InfoWindow({});
 
 
     map = new google.maps.Map(document.getElementById("map"), {
     map = new google.maps.Map(document.getElementById("map"), {
@@ -16,12 +84,100 @@ const GoogleMap = (props) => {
       disableDefaultUI: true,
       disableDefaultUI: true,
       zoomControl: true
       zoomControl: true
     });
     });
-  }, []);
 
 
-  return (
-    <div id="map" style={{height:props.containerWidth, backgroundColor:'pink'}}>
-    </div>
-  )
+    google.maps.event.addListenerOnce(map, "idle", () => {
+      this.getCurrentLocation();
+    });
+  }
+
+  getCurrentLocation() {
+    if (navigator.geolocation) {
+      map.setCenter(
+        new window.google.maps.LatLng({
+          lat: 37.2441088,
+          lng: 127.05054720000001
+        })
+      );
+    } else {
+      map.setCenter(
+        new window.google.maps.LatLng({
+          lat: 37.2441088,
+          lng: 127.05054720000001
+        })
+      );
+    }
+  }
+
+  drawMarkers() {
+    if (map == null) return;
+    const selectedMarker = new window.google.maps.Marker({});
+
+    markers = this.state.kickboards.map(item => {
+      const marker = new window.google.maps.Marker({
+        position: new window.google.maps.LatLng({
+          lat: item.coordinates.lat,
+          lng: item.coordinates.lon
+        })
+      });
+
+      const markerContent = `
+        <div>
+          <div style="color:black"> 시리얼번호: ${item.serialNumber} </div>
+        </div>
+      `;
+
+      marker.item = item;
+
+      this.renderMarker(marker);
+
+      window.google.maps.event.addListener(marker, "click", () => {
+        infoWindow.close();
+        infoWindow.setContent(markerContent);
+        infoWindow.open(map, marker);
+      });
+
+      window.google.maps.event.addListener(marker, "mouseover", () => {
+        this.highlightMarker(marker);
+      });
+
+      window.google.maps.event.addListener(marker, "mouseout", () => {
+        this.renderMarker(marker);
+      });
+
+      marker.setMap(map);
+      return marker;
+    });
+  }
+
+  renderMarker(marker) {
+    const { group, battery } = marker.item;
+
+    const groupString = getGroupUrlStringByGroup(group);
+    const batteryString = getBatteryUrlStringByBattery(battery);
+
+    const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}${groupString}.png`);
+    marker.setIcon(iconUrl);
+  }
+
+
+  highlightMarker(marker) {
+    const { group, battery } = marker.item;
+
+    const groupString = getGroupUrlStringByGroup(group);
+    const batteryString = getBatteryUrlStringByBattery(battery);
+
+    const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}${groupString}_selected.png`);
+    marker.setIcon(iconUrl);
+  }
+
+  render() {
+    this.drawMarkers();
+
+    return (
+      <div id="map" style={{height:this.props.containerWidth, backgroundColor:'pink'}}>
+      </div>
+    )
+  }
 };
 };
 
 
 export default Dimensions()(GoogleMap) // Enhanced component
 export default Dimensions()(GoogleMap) // Enhanced component
\ No newline at end of file

+const res = `
+{"success":true,"data":[{"serialNumber":"000000","battery":0,"dailyDrivenDistance":0,"dailyDrivenTime":0,"coordinates":{"lon":126.885654,"lat":37.480045},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":false,"createdAt":"2020-02-13T09:59:22.303Z","group":"target","state":"알 수 없는 오류"},{"serialNumber":"000001","battery":0,"dailyDrivenDistance":0,"dailyDrivenTime":0,"coordinates":{"lon":127.078668,"lat":37.244634},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":false,"createdAt":"2020-02-13T09:59:24.316Z","group":"target","state":"알 수 없는 오류"},{"serialNumber":"000002","battery":0,"dailyDrivenDistance":0,"dailyDrivenTime":52257,"coordinates":{"lon":126.886552,"lat":37.479997},"modelName":"MA01","isGoodReception":false,"isGoodPosture":true,"connected":true,"createdAt":"2020-04-16T08:40:51.817Z","group":"ready","state":"대기 중"},{"serialNumber":"000003","battery":78,"dailyDrivenDistance":0,"dailyDrivenTime":0,"coordinates":{"lon":127.05006,"lat":37.545254},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":false,"createdAt":"2020-02-04T01:57:45.032Z","group":"collect","state":"수거됨"},{"serialNumber":"000004","battery":0,"dailyDrivenDistance":0,"dailyDrivenTime":0,"coordinates":{"lon":127.078668,"lat":37.244634},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":false,"createdAt":"2020-02-13T09:59:26.569Z","group":"target","state":"알 수 없는 오류"},{"serialNumber":"000005","battery":0,"dailyDrivenDistance":0,"dailyDrivenTime":0,"coordinates":{"lon":127.050652,"lat":37.545297},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":false,"createdAt":"2020-02-13T15:02:15.601Z","group":"collect","state":"수거됨"},{"serialNumber":"000006","battery":94,"dailyDrivenDistance":0,"dailyDrivenTime":439119,"coordinates":{"lon":126.885743,"lat":37.479925},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":true,"createdAt":"2020-02-13T15:02:15.601Z","group":"ready","state":"서비스 종료"},{"serialNumber":"000007","battery":0,"dailyDrivenDistance":0,"dailyDrivenTime":0,"coordinates":{"lon":126.87614,"lat":37.482151},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":false,"createdAt":"2020-02-13T15:02:15.601Z","group":"target","state":"알 수 없는 오류"},{"serialNumber":"000008","battery":40,"dailyDrivenDistance":0,"dailyDrivenTime":29,"coordinates":{"lon":127.050652,"lat":37.545297},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":true,"createdAt":"2020-02-13T15:02:15.601Z","group":"collect","state":"수거됨"}]}`
+
+
+export default res;
\ No newline at end of file

@@ -8,20 +8,20 @@ import Notifications from "views/Notifications.jsx";
 import Kickboard from "views/Kickboard"
 import Kickboard from "views/Kickboard"
 
 
 const dashboardRoutes = [
 const dashboardRoutes = [
-  {
-    path: "/dashboard",
-    name: "Dashboard",
-    icon: "pe-7s-graph",
-    component: Dashboard,
-    layout: "/admin"
-  },
-  {
-    path: "/user",
-    name: "User Profile",
-    icon: "pe-7s-user",
-    component: UserProfile,
-    layout: "/admin"
-  },
+  // {
+  //   path: "/dashboard",
+  //   name: "Dashboard",
+  //   icon: "pe-7s-graph",
+  //   component: Dashboard,
+  //   layout: "/admin"
+  // },
+  // {
+  //   path: "/user",
+  //   name: "User Profile",
+  //   icon: "pe-7s-user",
+  //   component: UserProfile,
+  //   layout: "/admin"
+  // },
   {
   {
     path: "/table",
     path: "/table",
     name: "사용자 정보",
     name: "사용자 정보",
@@ -29,34 +29,34 @@ const dashboardRoutes = [
     component: UserHistory,
     component: UserHistory,
     layout: "/admin"
     layout: "/admin"
   },
   },
-  {
-    path: "/typography",
-    name: "Typography",
-    icon: "pe-7s-news-paper",
-    component: Typography,
-    layout: "/admin"
-  },
-  {
-    path: "/icons",
-    name: "Icons",
-    icon: "pe-7s-science",
-    component: Icons,
-    layout: "/admin"
-  },
-  {
-    path: "/maps",
-    name: "Maps",
-    icon: "pe-7s-map-marker",
-    component: Maps,
-    layout: "/admin"
-  },
-  {
-    path: "/notifications",
-    name: "Notifications",
-    icon: "pe-7s-bell",
-    component: Notifications,
-    layout: "/admin"
-  },
+  // {
+  //   path: "/typography",
+  //   name: "Typography",
+  //   icon: "pe-7s-news-paper",
+  //   component: Typography,
+  //   layout: "/admin"
+  // },
+  // {
+  //   path: "/icons",
+  //   name: "Icons",
+  //   icon: "pe-7s-science",
+  //   component: Icons,
+  //   layout: "/admin"
+  // },
+  // {
+  //   path: "/maps",
+  //   name: "Maps",
+  //   icon: "pe-7s-map-marker",
+  //   component: Maps,
+  //   layout: "/admin"
+  // },
+  // {
+  //   path: "/notifications",
+  //   name: "Notifications",
+  //   icon: "pe-7s-bell",
+  //   component: Notifications,
+  //   layout: "/admin"
+  // },
   {
   {
     path: "/kickboard",
     path: "/kickboard",
     name: "킥보드 정보",
     name: "킥보드 정보",