카카오 map api추가

카카오 map api를 이용한 검색기능 구현

@@ -18,9 +18,9 @@ app.get(['/food', '/food/:id'], function(req, res) {
   var id = req.params.id;
   var id = req.params.id;
   if (id) {
   if (id) {
     if (id == 'search') {
     if (id == 'search') {
-      res.render('search.ejs', {
+      res.render('map.ejs', {
         title: 'Searching',
         title: 'Searching',
-        description: 'You can search for food here.'
+        searching: '경희대학교 국제캠퍼스'
       });
       });
     } else if (id == 'recommendation') {
     } else if (id == 'recommendation') {
       res.render('recommendation.ejs', {
       res.render('recommendation.ejs', {
@@ -39,7 +39,11 @@ app.get(['/food', '/food/:id'], function(req, res) {
 //사용자가 호출한 search page
 //사용자가 호출한 search page
 app.post('/food/search', function(req, res) {
 app.post('/food/search', function(req, res) {
   var title = req.body.title;
   var title = req.body.title;
-  res.redirect("https://www.google.com/search?q=" + title + "&oq=" + title + "&aqs=chrome..69i57j0l3j69i60j69i61.3149j0j9&sourceid=chrome&ie=UTF-8")
+  res.render('map.ejs',{
+    title: 'Search',
+    searching: title
+  });
+  // res.redirect("https://www.google.com/search?q=" + title + "&oq=" + title + "&aqs=chrome..69i57j0l3j69i60j69i61.3149j0j9&sourceid=chrome&ie=UTF-8")
 })
 })
 
 
 //사용자가 호출한 recommendation page
 //사용자가 호출한 recommendation page
@@ -79,7 +83,6 @@ app.post('/food/recommendation', function(req, res) {
               var rand = Math.floor(Math.random() * length); //(Math.random() * (max - min)) + min
               var rand = Math.floor(Math.random() * length); //(Math.random() * (max - min)) + min
               var food_value = food[rand];
               var food_value = food[rand];
               console.log(rand);
               console.log(rand);
-
               res.render('print.ejs', {
               res.render('print.ejs', {
                 title: 'Recommendation',
                 title: 'Recommendation',
                 description: 'We recommend this...',
                 description: 'We recommend this...',

+.map_wrap, .map_wrap * {
+  margin: 0;
+  padding: 0;
+  font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;
+  font-size: 12px;
+}
+
+.map_wrap a, .map_wrap a:hover, .map_wrap a:active {
+  color: #000;
+  text-decoration: none;
+}
+
+.map_wrap {
+  position: relative;
+  width: 100%;
+  height: 500px;
+}
+
+#map {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+#menu_wrap {
+  position: absolute;
+  top: 0;
+  left:0;
+  bottom: 0;
+  width: 250px;
+  margin: 10px 0 30px 10px;
+  padding: 5px;
+  overflow-y: auto;
+  background: rgba(255, 255, 255, 0.7);
+  z-index: 1;
+  font-size: 12px;
+  border-radius: 10px;
+}
+
+.bg_white {
+  background: #fff;
+}
+
+#menu_wrap hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 2px solid #5F5F5F;
+  margin: 3px 0;
+}
+
+#menu_wrap .option {
+  text-align: center;
+}
+
+#menu_wrap .option p {
+  margin: 10px 0;
+}
+
+#menu_wrap .option button {
+  margin-left: 5px;
+}
+
+#placesList li {
+  list-style: none;
+}
+
+#placesList .item {
+  position: relative;
+  border-bottom: 1px solid #888;
+  overflow: hidden;
+  cursor: pointer;
+  min-height: 65px;
+}
+
+#placesList .item span {
+  display: block;
+  margin-top: 4px;
+}
+
+#placesList .item h5, #placesList .item .info {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#placesList .item .info {
+  padding: 10px 0 10px 55px;
+}
+
+#placesList .info .gray {
+  color: #8a8a8a;
+}
+
+#placesList .info .jibun {
+  padding-left: 26px;
+  background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;
+}
+
+#placesList .info .tel {
+  color: #009900;
+}
+
+#placesList .item .markerbg {
+  float: left;
+  position: absolute;
+  width: 36px;
+  height: 37px;
+  margin: 10px 0 0 10px;
+  background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png) no-repeat;
+}
+
+#placesList .item .marker_1 {
+  background-position: 0 -10px;
+}
+
+#placesList .item .marker_2 {
+  background-position: 0 -56px;
+}
+
+#placesList .item .marker_3 {
+  background-position: 0 -102px
+}
+
+#placesList .item .marker_4 {
+  background-position: 0 -148px;
+}
+
+#placesList .item .marker_5 {
+  background-position: 0 -194px;
+}
+
+#placesList .item .marker_6 {
+  background-position: 0 -240px;
+}
+
+#placesList .item .marker_7 {
+  background-position: 0 -286px;
+}
+
+#placesList .item .marker_8 {
+  background-position: 0 -332px;
+}
+
+#placesList .item .marker_9 {
+  background-position: 0 -378px;
+}
+
+#placesList .item .marker_10 {
+  background-position: 0 -423px;
+}
+
+#placesList .item .marker_11 {
+  background-position: 0 -470px;
+}
+
+#placesList .item .marker_12 {
+  background-position: 0 -516px;
+}
+
+#placesList .item .marker_13 {
+  background-position: 0 -562px;
+}
+
+#placesList .item .marker_14 {
+  background-position: 0 -608px;
+}
+
+#placesList .item .marker_15 {
+  background-position: 0 -654px;
+}
+
+#pagination {
+  margin: 10px auto;
+  text-align: center;
+}
+
+#pagination a {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+#pagination .on {
+  font-weight: bold;
+  cursor: default;
+  color: #777;
+}

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="/../map.css">
+  <!-- <link rel="stylesheet" href="/../style.css"> -->
+  <title>키워드로 장소검색하고 목록으로 표출하기</title>
+
+</head>
+
+<body>
+  <h1><a href="/food">점심 메뉴 정하기</a></h1>
+  <div class="grid">
+    <ul>
+      <il><a href="/food/search">검색</a></il><br>
+      <il><a href="/food/recommendation">추천</a></il>
+    </ul>
+
+    <article>
+      <h2>
+        <%= title %>
+      </h2>
+      <form action='/food/search' method='post'>
+        <p>
+          검색 :
+          <input type="text" name="title" placeholder="검색">
+          <input type="submit">
+        </p>
+      </form>
+    </article>
+  </div class="grid">
+  <div class="map_wrap">
+    <div id="map" ></div>
+
+    <div id="menu_wrap" class="bg_white">
+      <div class="option">
+        <div>
+          <form onsubmit="searchPlaces(); return false;">
+            키워드 : <input type="text" value='<%=searching%>' id="keyword" size="15">
+            <button type="submit">검색하기</button>
+          </form>
+        </div>
+      </div>
+      <hr>
+      <ul id="placesList"></ul>
+      <div id="pagination"></div>
+    </div>
+  </div>
+
+  <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a8a43eda451b054ac46a281a3db5d536&libraries=services"></script>
+  <script>
+    // 마커를 담을 배열입니다
+    var markers = [];
+
+    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
+      mapOption = {
+        center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
+        level: 3 // 지도의 확대 레벨
+      };
+
+    // 지도를 생성합니다
+    var map = new kakao.maps.Map(mapContainer, mapOption);
+
+    // 장소 검색 객체를 생성합니다
+    var ps = new kakao.maps.services.Places();
+
+    // 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다
+    var infowindow = new kakao.maps.InfoWindow({
+      zIndex: 1
+    });
+
+    // 키워드로 장소를 검색합니다
+    searchPlaces();
+
+    // 키워드 검색을 요청하는 함수입니다
+    function searchPlaces() {
+
+      var keyword = document.getElementById('keyword').value;
+
+      if (!keyword.replace(/^\s+|\s+$/g, '')) {
+        alert('키워드를 입력해주세요!');
+        return false;
+      }
+
+      // 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
+      ps.keywordSearch(keyword, placesSearchCB);
+    }
+
+    // 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
+    function placesSearchCB(data, status, pagination) {
+      if (status === kakao.maps.services.Status.OK) {
+
+        // 정상적으로 검색이 완료됐으면
+        // 검색 목록과 마커를 표출합니다
+        displayPlaces(data);
+
+        // 페이지 번호를 표출합니다
+        displayPagination(pagination);
+
+      } else if (status === kakao.maps.services.Status.ZERO_RESULT) {
+
+        alert('검색 결과가 존재하지 않습니다.');
+        return;
+
+      } else if (status === kakao.maps.services.Status.ERROR) {
+
+        alert('검색 결과 중 오류가 발생했습니다.');
+        return;
+
+      }
+    }
+
+    // 검색 결과 목록과 마커를 표출하는 함수입니다
+    function displayPlaces(places) {
+
+      var listEl = document.getElementById('placesList'),
+        menuEl = document.getElementById('menu_wrap'),
+        fragment = document.createDocumentFragment(),
+        bounds = new kakao.maps.LatLngBounds(),
+        listStr = '';
+
+      // 검색 결과 목록에 추가된 항목들을 제거합니다
+      removeAllChildNods(listEl);
+
+      // 지도에 표시되고 있는 마커를 제거합니다
+      removeMarker();
+
+      for (var i = 0; i < places.length; i++) {
+
+        // 마커를 생성하고 지도에 표시합니다
+        var placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
+          marker = addMarker(placePosition, i),
+          itemEl = getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다
+
+        // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
+        // LatLngBounds 객체에 좌표를 추가합니다
+        bounds.extend(placePosition);
+
+        // 마커와 검색결과 항목에 mouseover 했을때
+        // 해당 장소에 인포윈도우에 장소명을 표시합니다
+        // mouseout 했을 때는 인포윈도우를 닫습니다
+        (function(marker, title) {
+          kakao.maps.event.addListener(marker, 'mouseover', function() {
+            displayInfowindow(marker, title);
+          });
+
+          kakao.maps.event.addListener(marker, 'mouseout', function() {
+            infowindow.close();
+          });
+
+          itemEl.onmouseover = function() {
+            displayInfowindow(marker, title);
+          };
+
+          itemEl.onmouseout = function() {
+            infowindow.close();
+          };
+        })(marker, places[i].place_name);
+
+        fragment.appendChild(itemEl);
+      }
+
+      // 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
+      listEl.appendChild(fragment);
+      menuEl.scrollTop = 0;
+
+      // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
+      map.setBounds(bounds);
+    }
+
+    // 검색결과 항목을 Element로 반환하는 함수입니다
+    function getListItem(index, places) {
+
+      var el = document.createElement('li'),
+        itemStr = '<span class="markerbg marker_' + (index + 1) + '"></span>' +
+        '<div class="info">' +
+        '   <h5>' + places.place_name + '</h5>';
+
+      if (places.road_address_name) {
+        itemStr += '    <span>' + places.road_address_name + '</span>' +
+          '   <span class="jibun gray">' + places.address_name + '</span>';
+      } else {
+        itemStr += '    <span>' + places.address_name + '</span>';
+      }
+
+      itemStr += '  <span class="tel">' + places.phone + '</span>' +
+        '</div>';
+
+      el.innerHTML = itemStr;
+      el.className = 'item';
+
+      return el;
+    }
+
+    // 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
+    function addMarker(position, idx, title) {
+      var imageSrc = 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
+        imageSize = new kakao.maps.Size(36, 37), // 마커 이미지의 크기
+        imgOptions = {
+          spriteSize: new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
+          spriteOrigin: new kakao.maps.Point(0, (idx * 46) + 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
+          offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
+        },
+        markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
+        marker = new kakao.maps.Marker({
+          position: position, // 마커의 위치
+          image: markerImage
+        });
+
+      marker.setMap(map); // 지도 위에 마커를 표출합니다
+      markers.push(marker); // 배열에 생성된 마커를 추가합니다
+
+      return marker;
+    }
+
+    // 지도 위에 표시되고 있는 마커를 모두 제거합니다
+    function removeMarker() {
+      for (var i = 0; i < markers.length; i++) {
+        markers[i].setMap(null);
+      }
+      markers = [];
+    }
+
+    // 검색결과 목록 하단에 페이지번호를 표시는 함수입니다
+    function displayPagination(pagination) {
+      var paginationEl = document.getElementById('pagination'),
+        fragment = document.createDocumentFragment(),
+        i;
+
+      // 기존에 추가된 페이지번호를 삭제합니다
+      while (paginationEl.hasChildNodes()) {
+        paginationEl.removeChild(paginationEl.lastChild);
+      }
+
+      for (i = 1; i <= pagination.last; i++) {
+        var el = document.createElement('a');
+        el.href = "#";
+        el.innerHTML = i;
+
+        if (i === pagination.current) {
+          el.className = 'on';
+        } else {
+          el.onclick = (function(i) {
+            return function() {
+              pagination.gotoPage(i);
+            }
+          })(i);
+        }
+
+        fragment.appendChild(el);
+      }
+      paginationEl.appendChild(fragment);
+    }
+
+    // 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다
+    // 인포윈도우에 장소명을 표시합니다
+    function displayInfowindow(marker, title) {
+      var content = '<div style="padding:5px;z-index:1;">' + title + '</div>';
+
+      infowindow.setContent(content);
+      infowindow.open(map, marker);
+    }
+
+    // 검색결과 목록의 자식 Element를 제거하는 함수입니다
+    function removeAllChildNods(el) {
+      while (el.hasChildNodes()) {
+        el.removeChild(el.lastChild);
+      }
+    }
+  </script>
+</body>
+
+</html>