카카오 지도 API는 카카오에서 제공하는 API로 생성된 앱 기준 1일 30만건을 호출할 수 있다. 만약 더 사용이 필요할 경우 고객문의를 통해 협의를 할 수 있다. 대부분의 개인 사이트는 30만건 내 이용이 가능하니 걱정할 필요는 없다. 

카카오 지도 API를 이용하기 위해선 당연하게도 카카오 개발자 센터를 통하 앱 생성 및 설정등이 필요하다 해당 설정등은 본 포스팅에서는 다루지 않으니 본 포스팅 글중 아래의 내용을 참고하기 바란다. 

기본적으로 지도를 띄우는 방법은 카카오 지도 Web API 가이드에도 자세히 나와있으니 함께 참고하도록 하고 여기서는 이 API 를 조금 모듈화? 하여 설명하는 예제이니 참고 바란다. 

[샘플보기]

<!-- jquery -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><?php // http://craftpip.github.io/jquery-confirm/ ?> 

<!-- kakao 지도 api (+ services와 clusterer, drawing 라이브러리 불러오기) -->
<!-- 
@libraries 설명 for kakao 
	clusterer: 마커를 클러스터링 할 수 있는 클러스터러 라이브러리 입니다.
	services: 장소 검색 과 주소-좌표 변환 을 할 수 있는 services 라이브러리 입니다.
	drawing: 지도 위에 마커와 그래픽스 객체를 쉽게 그릴 수 있게 그리기 모드를 지원하는 drawing 라이브러리 입니다.
-->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=543d067cfc41f7325d2f408e2f32264d&libraries=services,clusterer,drawing"></script>

<!-- style -->
<style>
	.container{  overflow: hidden; }
	.container { overflow: hidden; width:100%; max-width: 500px; margin:40px auto;  }
	.container .evt-map{ width:100%; height:300px; border:solid 1px #eee; }

</style>

<!-- 지도를 띄울 Container -->
<div class="container">
	<div class="group">
		<h1>지도</h1>
		<div class="evt-map" id="map"></div>
	</div>
</div>

<!-- script -->
<script>
	var map = {
		item : {},

		// 맵 로드
		load : function(id, options){
			var thisObj = this;
			if (typeof id == 'undefined'){ return false; }

			// 옵션이 없을 경우 기본값 정의
			if(typeof options == 'undefined'){ options = {};}

			// 지도의 옵션 초기화
			if(typeof options.lat =='undefined'){ options.lat = 33.450701;}
			if(typeof options.lng =='undefined'){ options.lng = 126.570667;}
			if(typeof options.level =='undefined'){ options.level = 3;}

			// 맵 옵션
			var mapOptions = {
				center: new kakao.maps.LatLng(options.lat, options.lng), // 지도의 중심좌표
				level: options.level // 지도의 확대 레벨				
			}

			// 지도 생성
			thisObj.item[id] = new kakao.maps.Map(document.getElementById(id),mapOptions);

			// 마커 생성
			var marker = new kakao.maps.Marker({
			    position: new kakao.maps.LatLng(options.lat, options.lng)
			});		

			// 마커를 적용
			marker.setMap(thisObj.item[id]);
		},
	};
	$(document).ready(function(e){
		map.load('map',{});
	});
</script>

결과화면)

위와 같이 예제를 실행하면 기본 지도가 띄워진 화면을 볼 수 있다. 여기서 중요한점은 마커를 생성후 `setMap` 메서드를 통해 지도에 마커를 적용해주어야 한다는 점이다. `setMap` 메서드의 경우 옵션 설정 후 설정된 결과를 지도에 적용할 시 사용할 수 있는데 해당 파라미터로는 생성된 지도 객체가 사용되니, 각종 변경등의 이벤트를 적용하기위해선 글로벌 변수로 저장해 두고 다른 변수들과 겹치지 않게 처리하는게 중요하다. 

그럼 다음편에서는 주소 입력을 받아서 원하는 위치에 마커를 띄우는 예제에 대해 알아보도록 하자.

(드래그 가능한 마커 포스팅 역시 해당 소스를 그대로 이용하여 예제를 진행할테니 참고 바란다.)