[Open API] 카카오 Open API 사용하기

카카오 Open API 사용법

카카오 개발자 센터 에 접속 후 카카오 계정으로 로그인

내 애플리케이션 클릭 후 애플리케이션 추가하기 클릭

앱 이름과 사업자명 입력 후 저장을 클릭하면 내 애플리케이션이 추가된 것을 확인할 수 있다.

내 애플리케이션 > 앱 설정 > 플랫폼으로 들어가서 Web 플랫폼 등록을 해준다.

문서에 들어가서
사용하고자 하는 카카오 Open API를 선택한다.

해당 포스팅에서는 카카오 지도을 사용할 것이기 때문에 지도를 선택한다.

지도 SDK 웹 사이트를 클릭하면 다음과 같은 창으로 이동한다.
Web을 사용할 것이기 때문에 화면 중앙 Web 클릭

이후 카카오 지도 API 문서를 참고하여 개발을 진행하면 된다.

Spring 이용 카카오 지도 API 활용 예제

Spring mvc project 프로젝트 파일을 생성 후 MVC 구조로 카카오 지도 API를 출력해보자.

Model

package com.kh.spring.kakao;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@AllArgsConstructor
@NoArgsConstructor
@Data
public class MapInfo {
	private String name; 
	private	String address;
	private double x; //위도 
	private double y; //경도 
}

View

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="path" value="${pageContext.request.contextPath}" />

<jsp:include page="/WEB-INF/views/common/header.jsp">
	<jsp:param value="카카오 맵 데모" name="title" />
</jsp:include>
<style>
.customoverlay {
	position: relative;
	bottom: 85px;
	border-radius: 6px;
	border: 1px solid #ccc;
	border-bottom: 2px solid #ddd;
	float: left;
}

.customoverlay:nth-of-type(n) {
	border: 0;
	box-shadow: 0px 1px 2px #888;
}

.customoverlay a {
	display: block;
	text-decoration: none;
	color: #000;
	text-align: center;
	border-radius: 6px;
	font-size: 14px;
	font-weight: bold;
	overflow: hidden;
	background: #d95050;
	background: #d95050
		url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png)
		no-repeat right 14px center;
}

.customoverlay .title {
	display: block;
	text-align: center;
	background: #fff;
	margin-right: 35px;
	padding: 10px 15px;
	font-size: 14px;
	font-weight: bold;
}

.customoverlay:after {
	content: '';
	position: absolute;
	margin-left: -12px;
	left: 50%;
	bottom: -12px;
	width: 22px;
	height: 12px;
	background:
		url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')
}
</style>


<section id="container">
	<div id="map" style="width: 100%; height: 400px;"></div>
</section>


<script type="text/javascript"
	src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c012367ce50cd5f2e93814481c3cf769"></script>
<script>
	var container = document.getElementById('map'), // 지도를 표시할 div  
	option = { 
	    center: new kakao.maps.LatLng(${x}, ${y}), // 지도의 중심좌표
	    level: 3 // 지도의 확대 레벨
	};
	
	var map = new kakao.maps.Map(container, option); // 지도를 생성합니다
	
	//마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다 
	var positions = [
		<c:forEach var="map" items="${mapList}" >
			{
			    content: '<div>${map.name}</div>', 
			    latlng: new kakao.maps.LatLng(${map.x}, ${map.y})
			},
		</c:forEach>
	];
	
	for (var i = 0; i < positions.length; i ++) {
	// 마커를 생성합니다
	var marker = new kakao.maps.Marker({
	    map: map, // 마커를 표시할 지도
	    position: positions[i].latlng // 마커의 위치
	});
	
	// 마커에 표시할 인포윈도우를 생성합니다 
	var infowindow = new kakao.maps.InfoWindow({
	    content: positions[i].content // 인포윈도우에 표시할 내용
	});
	
	// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
	// 이벤트 리스너로는 클로저를 만들어 등록합니다 
	// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
	kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
	kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
	}
	
	//인포윈도우를 표시하는 클로저를 만드는 함수입니다 
	function makeOverListener(map, marker, infowindow) {
	return function() {
	    infowindow.open(map, marker);
	};
	}
	
	//인포윈도우를 닫는 클로저를 만드는 함수입니다 
	function makeOutListener(infowindow) {
	return function() {
	    infowindow.close();
	};
	}
</script>

Controller

package com.kh.spring.kakao.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.kh.spring.kakao.MapInfo;

@Controller
public class KakaoController {

	@RequestMapping("/kakaoMap1") //http://localhost:8084/spring/kakaoMap1 
	String kakaoMap1(Model model) {

		List<MapInfo> mapList = new ArrayList<MapInfo>();
		// 원하는 곳 위도와 경도를 찾아서 저장
		mapList.add(new MapInfo("카카오", "제주시 어쩌구동", 33.450705, 126.570677));
		mapList.add(new MapInfo("생태연못","제주시 어쩌구",33.450936,126.569477));
		mapList.add(new MapInfo("텃밭","제주시 어쩌구",33.450879,126.569940));
		mapList.add(new MapInfo("근린공원","제주시 어쩌구",33.451393,126.570738));
		
		double x = 0.0;
		double y = 0.0;
		
		for(MapInfo map : mapList) {
			x += map.getX();
			y += map.getY();
		}
		
		x = x/mapList.size();
		y = y/mapList.size();
		
		model.addAttribute("mapList", mapList);
		model.addAttribute("x",x);
		model.addAttribute("y",y);
		
		return "/kakao/kakaoMap1";

	}
	
	@RequestMapping("/kakaoMap2") ////http://localhost:8084/spring/kakaoMap1 
	String kakaoMap2(Model model) {

		List<MapInfo> mapList = new ArrayList<MapInfo>();
		// 원하는 곳 위도와 경도를 찾아서 저장
		mapList.add(new MapInfo("카카오", "제주시 어쩌구동", 33.450705, 126.570677));
		mapList.add(new MapInfo("생태연못","제주시 어쩌구",33.450936,126.569477));
		mapList.add(new MapInfo("텃밭","제주시 어쩌구",33.450879,126.569940));
		mapList.add(new MapInfo("근린공원","제주시 어쩌구",33.451393,126.570738));
		
		double x = 0.0;
		double y = 0.0;
		
		for(MapInfo map : mapList) {
			x += map.getX();
			y += map.getY();
		}
		
		x = x/mapList.size();
		y = y/mapList.size();
		
		model.addAttribute("mapList", mapList);
		model.addAttribute("x",x);
		model.addAttribute("y",y);
		
		return "/kakao/kakaoMap2";

	}
}

실행화면