implement InfoWindow

- add display infowindow function for each marker

@@ -15,13 +15,14 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 13vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
+  font-weight: bold;
 }
 
 .App-link {

@@ -26,6 +26,7 @@ export default class Home extends Component {
       // routeInformation: null,
     };
     this.removeAllChildNods = this.removeAllChildNods.bind(this);
+    this.displayInfowindow = this.displayInfowindow.bind(this);
   }
 
   searchPlaces() {
@@ -87,7 +88,18 @@ export default class Home extends Component {
       // 마커와 검색결과 항목에 mouseover 했을때
       // 해당 장소에 인포윈도우에 장소명을 표시합니다
       // mouseout 했을 때는 인포윈도우를 닫습니다
-
+      ((marker, title) => {
+        kakao.maps.event.addListener(marker, "click", () => {
+          this.displayInfowindow(marker, title);
+        });
+        kakao.maps.event.addListener(marker, "mouseover", () => {
+          this.displayInfowindow(marker, title);
+        });
+
+        itemEl.onmouseover = () => {
+          this.displayInfowindow(marker, title);
+        };
+      })(marker, places[i].place_name);
       // 함수를 조건문처럼 사용하여 해당 함수가 true일때 marker,places[i].place_name함수가 불리워짐.
 
       fragment.appendChild(itemEl);
@@ -205,6 +217,81 @@ export default class Home extends Component {
     }
   }
 
+  // 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다
+  // 인포윈도우에 장소명을 표시합니다
+  displayInfowindow(marker, title) {
+    console.log(marker);
+
+    let content = document.createElement("div");
+    content.className = "wraps";
+
+    let info = document.createElement("div");
+    info.className = "infos";
+
+    let titles = document.createElement("div");
+    titles.className = "title";
+    titles.innerHTML = title;
+
+    let close = document.createElement("div");
+    close.className = "close";
+    close.onclick = () => {
+      this.state.infoWindow.setMap(null);
+    };
+
+    let body = document.createElement("div");
+    body.className = "body";
+    let desc = document.createElement("div");
+    let list = document.createElement("list");
+    let second = document.createElement("LI");
+    let br = document.createElement("div");
+    br.innerHTML += "<br>";
+    let second_ = document.createElement("LI");
+
+    let getMise = document.createElement("Button");
+    getMise.innerHTML = "미세먼지 정보";
+    getMise.className = "info-button";
+    getMise.onclick = () => {
+      let position = marker.getPosition();
+      console.log(marker.getPosition());
+      console.log(position["Ga"]);
+    };
+    let setDepart = document.createElement("Button");
+    setDepart.innerHTML = "출발지로 설정하기";
+    setDepart.onclick = () => {
+      this.setState({
+        departure: marker.getPosition(),
+        departureTitle: title,
+      });
+    };
+    setDepart.className = "info-button";
+    let setArrive = document.createElement("Button");
+    setArrive.innerHTML = "도착지로 설정하기";
+    setArrive.onclick = () => {
+      this.setState({
+        arrival: marker.getPosition(),
+        arrivalTitle: title,
+      });
+    };
+    setArrive.className = "info-button";
+    second.appendChild(getMise);
+    second.appendChild(br);
+    second_.appendChild(setDepart);
+    second_.appendChild(setArrive);
+
+    list.appendChild(second);
+    list.appendChild(second_);
+    desc.appendChild(list);
+    body.appendChild(desc);
+    titles.appendChild(close);
+    info.appendChild(titles);
+    info.appendChild(body);
+    content.appendChild(info);
+
+    this.state.infoWindow.setContent(content);
+    this.state.infoWindow.setPosition(marker.getPosition());
+    this.state.infoWindow.setMap(this.state.map);
+  }
+
   componentDidMount() {
     // 컴포넌트가 만들어지고, render 함수가 호출된 이후에 호출되는 메소
     // AJAX나 타이머를 생성하는 코드를 작성하는 파트이다.