8) 카카오 지도 API 사용하기 - Spring Project (OTT 서비스)

8) 카카오 지도 API 사용하기 - Spring Project (OTT 서비스)프로젝트/OTT2023. 2. 27. 10:13@mag1c

Table of Contents

728x90

해당 프로젝트는 2023/01/25 ~ 2023/03/12 내에 진행되는
아카데미 내 수강생들끼리 팀을 나누어 진행한 모의 프로젝트입니다.
팀원은 5명이었으며, 프로젝트 리더를 맡았습니다.

이전 글 목록

1) 주어진 RFP를 바탕으로 주제 선정 - Spring Project(OTT 서비스)
2) ERD 설계 - Spring Project(OTT 서비스)
3) 회원 가입 기능 구현 - Spring Project (OTT 서비스)
4) 로그인, 로그아웃 기능 구현 - Spring Project (OTT 서비스)
5) 상세 페이지 및 회원 정보 수정 - Spring Project (OTT 서비스)
6) CRUD를 한번에 → 게시판 만들기(QNA게시판) - Spring Project(Mybatis) (OTT 서비스)
7) 게시판 페이징 처리 - Spring Project (OTT 서비스)

지도넣기

여기저기 웹을 돌아다니다 보면 Footer 혹은 회사 연혁 같은 곳에 회사 설명 및 지도가 간략하게 표시되어있는 것이 기억나서 간단하게 카카오 API를 통해 구현 해 보기로 했다.

https://apis.map.kakao.com/

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/resources/css/common/footer.css">
<!-- KAKAO MAP api -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=MY JAVASCRIPT APP KEY"></script>    
</head>
<footer>
	<br>
	<div id="f_Con1">
		<div id="map"></div>	
		<div id="f_Con2">
			<h3>주식회사 GOOTTFLEX</h3><br>
			<p>대표 군침이</p><br>
			<p>서울특별시 구로구 시흥대로163길 33 주호타워 2층</p><br>
			<p>사업자등록번호 111-00-22222</p><br>
			<p>대표번호 02-333-9999</p><br>
			<p>FAX: 02-333-9999</p><br>
			<p>ⓒ GOOTTFLEX Corp.</p>
		</div>
	</div>
	<div class="link_box">
		<a href="/qna/list">GOOTTFLEX 고객센터&nbsp;|</a><a href="/qna/list">&nbsp;개인정보 처리 방침&nbsp;|</a><a href="/qna/list">&nbsp;청소년 보호정책</a>
	</div>
</footer>

<script src="/resources/js/api/map.js"></script>
</html>

Footer에다 구현 할 생각이기 때문에 Footer에다 map div을 생성 해 주었다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=MY JAVASCRIPT APP KEY"></script>

해당 코드의 appkey="xxxx"에 내 appkey를 넣으면 되는데

자바스크립트를 이용할 것이기 때문에 자바 스크립트 키를 입력 해 주었다.

https://apis.map.kakao.com/web/

카카오 지도 API DOCS에 가게 되면 사용 방법 및 커스터마이징 하는 방법들이 자세하게 나와있다.

map.js

/* 카카오 map api - 02.07 */
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(37.48195693074062, 126.89815006835722), // 지도의 중심좌표
        level: 2 // 지도의 확대 레벨
    };
    
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

//일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();

// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

// 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

var iwContent = '<div style="padding:5px; text-align:center;">구트아카데미</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
    iwPosition = new kakao.maps.LatLng(37.48195693074062, 126.89815006835722), //인포윈도우 표시 위치입니다
    iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

// 인포윈도우를 생성하고 지도에 표시합니다
var infowindow = new kakao.maps.InfoWindow({
    map: map, // 인포윈도우가 표시될 지도
    position : iwPosition, 
    content : iwContent,
    removable : iwRemoveable
});
      
// 지도에서 제거
// infowindow.close();        

// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);

간단하게 필요한 부분들만 사용하였다.