카카오 지도 API 사용 - 기본지도를 띄우고 마커를 추가
카카오 지도 API 사용 - 기본지도를 띄우고 마커를 추가
REDINFO
몇달 전 2023-05-29 17:33:40

 

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

 

카카오 지도 API
 
Kakao 지도 API
Kakao 지도 API를 이용해보세요. 다양한 샘플과 상세한 매뉴얼로 개발자분들의 시간을 아껴드리겠습니다!
apis.map.kakao.com

 

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

 

 
Kakao Developers 를 통한 애플리케이션 생성
카카오 API를 통한 애플리케이션 생성은 생각보다 간단하다. 물론 처음 접하는 경우 생성은 쉽더라도 서비스에 대한 설정이 어려울 수 있지만, 카카오 Developers 를 이용하는 사람들은 대다수 사이트 관리자 또는 개발자이기때문에 쉽게 할 수 있을 거라고 생각한다. 이번편은 간단하게 카카오 Developers 를 통해 애플리케이션과 웹 플랫폼을 등록하는 ···
blog.redinfo.co.kr/post/view?pid=103

 

기본 지도 띄우기

기본적으로 지도를 띄우는 방법은 카카오 지도 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` 메서드의 경우 옵션 설정 후 설정된 결과를 지도에 적용할 시 사용할 수 있는데 해당 파라미터로는 생성된 지도 객체가 사용되니, 각종 변경등의 이벤트를 적용하기위해선 글로벌 변수로 저장해 두고 다른 변수들과 겹치지 않게 처리하는게 중요하다. 

 

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

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

이 포스트글이 도움이 되었나요?
0
그룹 목록
카테고리 연관글

Comment

댓글작성

0(500) | 1(30)