map.ejs 13.1 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="stylesheets/bootstrap.css" />
    <title>Cafe Map</title>
    <style>
      .btn-primary {
        color: white !important;
      }
      p {
        font-family: "Noto Sans KR", sans-serif;
      }
      h1 {
        font-family: "Noto Sans KR", sans-serif;
      }
      h4 {
        font-family: "Noto Sans KR", sans-serif;
      }
      h2 {
        font-family: "Noto Sans KR", sans-serif;
      }
      h3 {
        font-family: "Noto Sans KR", sans-serif;
      }
      h5 {
        font-family: "Noto Sans KR", sans-serif;
      }
      .placeinfo_wrap {
        position: absolute;
        bottom: 28px;
        left: -150px;
        width: 300px;
      }
      .placeinfo {
        position: relative;
        width: 100%;
        border-radius: 6px;
        border: 1px solid #ccc;
        border-bottom: 2px solid #ddd;
        padding-bottom: 10px;
        background: #fff;
      }
      .placeinfo:nth-of-type(n) {
        border: 0;
        box-shadow: 0px 1px 2px #888;
      }
      .placeinfo_wrap .after {
        content: "";
        position: relative;
        margin-left: -12px;
        left: 50%;
        width: 22px;
        height: 12px;
        background: url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png");
      }
      .placeinfo a,
      .placeinfo a:hover,
      .placeinfo a:active {
        color: #fff;
        text-decoration: none;
      }
      .placeinfo a,
      .placeinfo span {
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .placeinfo span {
        margin: 5px 5px 0 5px;
        cursor: default;
        font-size: 13px;
      }
      .placeinfo .title {
        font-weight: bold;
        font-size: 14px;
        border-radius: 6px 6px 0 0;
        margin: -1px -1px 0 -1px;
        padding: 10px;
        color: #fff;
        background: #d95050;
        background: #d95050
          url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png)
          no-repeat right 14px center;
      }
      .placeinfo .tel {
        color: #0f7833;
      }
      .placeinfo .jibun {
        color: #999;
        font-size: 11px;
        margin-top: 0;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <a class="navbar-brand" href="/" style="margin-left: 10px"><strong>Home</strong></a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a
              class="nav-link"
              style="color: #ffffff"
              href="#"
              data-toggle="modal"
              data-target="#profile"
              ><%=user.nickname%>'s Profile<span class="sr-only"
                >(current)</span
              ></a
            >
          </li>
          <li class="nav-item active">
            <a
              class="nav-link"
              style="color: #ffffff"
              href="/"
              onclick="signOut();"
              >Logout<span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item active">
            <a class="nav-link" style="color: #ffffff" href="javascript:void(0);" onclick="recommend();"
              >Recommend
              <span class="sr-only">(current)</span>
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="pricing-header px-3 py-1 pt-md-3 pb-md-1 mx-auto text-center">
      <h3 class="display-6 font-weight-bold">Map</h3>
    </div>
    <section id="carousel-3" class="text-center">
      <div class="row">
        <div class="col-1"></div>

        <div class="col-10">
          <div id="map" style="width: 100%; height: 575px"></div>
        </div>

        <div class="col-1"></div>
      </div>
      <button
        type="button"
        id="Recommend"
        class="btn btn-primary"
        onclick="recommend();"
      >
        추천
      </button>
      <p id="recommend"></p>
    </section>

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은API키&libraries=services"></script>
    <script>
      var lat = "";
      var lon = "";
      var placeOverlay = new kakao.maps.CustomOverlay({ zIndex: 1 });
      var contentNode = document.createElement("div");
      var recommendID = [];
      var recommendList = [];
      var markers = [];
      var currCategory = "CE7"; // 카테고리코드: 카페
      var order = 1;
      var click = false;

      // 추천기능 (ajax 통신)
      function recommend() {
        $.ajax({
          url: "/recommend",
          type: "GET",
          success: function (result) {
            // 추천 기능 활성화
            if (!click) {
              if (result) {
                for (var i = 0; i < result.row.length; i++) {
                  recommendID.push(result.row[i].CAFE_ID);
                }
                console.log(recommendID);
                click = true;
                removeMarker();
                searchPlaces();
                alert("추천이 활성화 되었습니다.");
              }
            } // 추천 기능 비활성화
            else {
              recommendID = [];
              recommendList = [];
              click = false;
              removeMarker();
              searchPlaces();
              alert("추천이 비활성화 되었습니다.");
            }
          },
        });
      }
      // 지도 기본설정
      var mapContainer = document.getElementById("map"),
        mapOption = {
          center: new kakao.maps.LatLng(36.2477502, 127.078164),
          level: 12,
        };
      var map = new kakao.maps.Map(mapContainer, mapOption);
      var ps = new kakao.maps.services.Places(map);
      kakao.maps.event.addListener(map, "idle", searchPlaces);
      contentNode.className = "placeinfo_wrap";
      addEventHandle(contentNode, "mousedown", kakao.maps.event.preventMap);
      addEventHandle(contentNode, "touchstart", kakao.maps.event.preventMap);
      placeOverlay.setContent(contentNode);

      function addEventHandle(target, type, callback) {
        if (target.addEventListener) {
          target.addEventListener(type, callback);
        } else {
          target.attachEvent("on" + type, callback);
        }
      }
      placeOverlay.setContent(contentNode);

      // navigator 활성화 시 (현재 위치 이동)
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
          lat = position.coords.latitude;
          lon = position.coords.longitude;
          var locPosition = new kakao.maps.LatLng(lat, lon);
          displayCurrentPosition(locPosition);
        });
      } else {
        var locPosition = new kakao.maps.LatLng(36.2477502, 127.078164);
        displayCurrentPosition(locPosition);
      }

      // 현재 사용자 기준 위치로 이동
      function displayCurrentPosition(locPosition) {
        map.setCenter(locPosition);
      }
      kakao.maps.event.addListener(map, "idle", searchPlaces);

      function searchPlaces() {
        if (!currCategory) {
          return;
        }
        placeOverlay.setMap(null);
        ps.categorySearch(currCategory, placesSearchCB, { usemapBounds: true });
      }

      function placesSearchCB(data, status, pagination) {
        if (pagination.hasNextPage) {
          pagination.nextPage();
        }
        if (status === kakao.maps.services.Status.OK) {
          // 추천 기능 활성화
          if (recommendID.length > 0) {
            console.log(recommendID);
            for (var i = 0; i < recommendID.length; i++) {
              for (var j = 0; j < data.length; j++) {
                if (recommendID[i] == data[j].id) {
                  recommendList.push(data[j]);
                  break;
                }
              }
            }
            displayPlaces(recommendList);
          } // 추천 기능 비활성화
          else {
            displayPlaces(data);
          }
        }
      }

      // 지도에 카페 보여주기
      function displayPlaces(places) {
        for (var i = 0; i < places.length; i++) {
          var marker = addMarker(
            new kakao.maps.LatLng(places[i].y, places[i].x),
            order
          );
          (function (marker, place) {
            kakao.maps.event.addListener(marker, "click", function () {
              displayPlaceInfo(place);
            });
          })(marker, places[i]);
        }
      }

      // 마커 추가
      function addMarker(position, order) {
        var imageSrc =
          "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png";
        var imageSize = new kakao.maps.Size(27, 30);
        var imgOptions = {
          spriteSize: new kakao.maps.Size(72, 220),
          spriteOrigin: new kakao.maps.Point(46, 150),
          offset: new kakao.maps.Point(11, 28),
        };
        var markerImage = new kakao.maps.MarkerImage(
          imageSrc,
          imageSize,
          imgOptions
        );
        var 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 displayPlaceInfo(place) {
        console.log(place);
        var content =
          '<div class="placeinfo">' +
          '   <a class="title" href="' +
          place.place_url +
          '" target="_blank" title="' +
          place.place_name +
          '">' +
          place.place_name +
          "</a>";
        if (place.road_address_name) {
          content +=
            '    <span title="' +
            place.road_address_name +
            '">' +
            place.road_address_name +
            "</span>" +
            '  <span class="jibun" title="' +
            place.address_name +
            '">(지번 : ' +
            place.address_name +
            ")</span>";
        } else {
          content +=
            '    <span title="' +
            place.address_name +
            '">' +
            place.address_name +
            "</span>";
        }
        content +=
          '    <span class="tel">' +
          place.phone +
          "</span>" +
          `<a href="/review/${place.id}"><button type="button" class="btn btn-outline-danger" style="font-size:70%;">후기 작성</button>`;
        "</div>" + '<div class="after"></div>';
        contentNode.innerHTML = content;
        placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x));
        placeOverlay.setMap(map);
      }
    </script>
    <script src="javascripts/bootstrap.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <!-- 모달 바디 -->
    <div
      class="modal fade"
      id="profile"
      tabindex="-1"
      role="dialog"
      aria-labelledby="profilemodal"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="profilemodal">
              <%=user.nickname%>'s PROFILE
            </h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body text-center">
            <div class="card mb-3">
              <div class="row g-0">
                <div class="col-md-4">
                  <img
                    src="<%= user.picture%>"
                    alt="google profile picture"
                    style="width: 100%; height: 100%"
                  />
                </div>
                <div class="col-md-8">
                  <div class="card-body">
                    <h5 class="card-title"><%=user.nickname%></h5>
                    <p class="card-text">
                      Age : <%=user.age%>, Gender : <%=user.gender%>
                    </p>
                    <p class="card-text">Emaile : <%=user.email%></p>
                    <p class="card-text">
                      <small class="text-muted"
                        >from Google and CafeRecommend</small
                      >
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <button type="button" class="btn btn-primary" data-dismiss="modal">
            확인
          </button>
        </div>
      </div>
    </div>
  </body>
</html>