Kakao Map 연동 구조

moon.kick·2025년 4월 21일

응! Kakao Map 연동 구조는 JSP + Servlet 기반에서도 충분히 구현 가능해! 😎
전체 흐름을 정리하면 이렇고, 가능 여부 → 완전 가능!

✅ 전체 흐름 정리 (JSP + Servlet 기반 Kakao Map 연동)

1. 사용자 위치 등록 (select 선택값)

register.jsp 또는 signup.jsp 등에서 사용자 지역 선택

<form action="RegisterServlet" method="post">
  <select name="region">
    <option value="gangnam">강남</option>
    <option value="hongdae">홍대</option>
    <!-- ... -->
  </select>
  <input type="submit" value="가입">
</form>

2. Servlet에서 region 값 DB 저장

// RegisterServlet.java
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String region = request.getParameter("region");
    // UserDTO.setRegion(region); 이후 DB 저장
}

3. 상품 등록 시 region도 같이 저장

ProductInsertServlet에서 사용자가 상품 올릴 때 region도 같이 전송
예: <input type="hidden" name="region" value="gangnam"> 등

4. 상품 목록 필터링

ProductListServlet에서 현재 로그인 사용자의 region 불러옴
그 region 기준으로 상품만 조회 → DAO에서 조건 걸어줌

SELECT * FROM product WHERE region = ?

5. JSP에서 Kakao Map 마커 그리기

productList.jsp에 지도 넣고, 서버에서 가져온 상품 위치마다 Marker 뿌림

<c:forEach var="product" items="${productList}">
  <script>
    var markerPosition  = new kakao.maps.LatLng(${product.lat}, ${product.lng});
    var marker = new kakao.maps.Marker({
        position: markerPosition
    });
    marker.setMap(map);
  </script>
</c:forEach>

💡 lat, lng은 DB에 저장되어 있어야 하고, 상품 등록 시 Kakao 주소 검색 API 써서 좌표 얻을 수 있어!

✅ JSP + Servlet에서 Kakao Map 연동 가능한 이유

Kakao Map API는 JavaScript 기반 프론트 API야 → JSP에서 바로 쓸 수 있음
위치 정보 (region, lat/lng 등)는 Servlet에서 DB로 저장/조회
마커는 JSP에서 <script>로 반복문 돌리면서 찍으면 끝!

✅ 보너스 팁: 상품 등록 시 좌표 자동으로 얻기

<!-- Kakao 주소 검색 API 예제 -->
<input type="text" id="addressInput">
<button onclick="searchAddress()">주소 찾기</button>

<script>
  function searchAddress() {
    var geocoder = new kakao.maps.services.Geocoder();
    geocoder.addressSearch(document.getElementById("addressInput").value, function(result, status) {
      if (status === kakao.maps.services.Status.OK) {
        var lat = result[0].y;
        var lng = result[0].x;
        // hidden input에 저장
        document.getElementById("lat").value = lat;
        document.getElementById("lng").value = lng;
      }
    });
  }
</script>

<input type="hidden" name="lat" id="lat">
<input type="hidden" name="lng" id="lng">