[JavaScript] Kakao 지도 API 사용하기(403 에러 포함)

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

 

지도 Api 사용하기 위한 가입 및 설정

개발자사이트 클릭

 

 

시작하기 클릭

 

 

 

 

 

앱 추가 클릭

 

 

 

 

적당히 아무렇게 적어준다

 

 

 

생성된 앱을 클릭

 

 

 

 

플랫폼 클릭

 

 

 

하단의 Web 에서 플랫폼을 추가한다

 

개발하고 있는 url 을 입력한다

http://localhost:8080/test/mapApi.do 에서 지도Api 를 사용하는데

도메인만 입력해 주면 된다 예) http://localhost:8080

 

 

 

앱 키 메뉴에 들어가면 이용하려는 api key 가 있다

 

 

 

이후에 script 를 구성하여 지도 api 를 사용하는 가이드가 진행되는데 

여기서 하나 더 설정을 해줘야 한다

 

 

 

카카오맵 메뉴에서 활성화 설정을 on 한다

 

 

상태를 ON 으로 하지 않으면 403 오류를 계속 뱉는다

(새로 추가된 부분이라는데 가이드에 없어서 엄청 찾았다)

 

 

 

 

---

 

 

지도 Api 사용하기

<div class="col-6">
	// map 을 그리기 위한 div
	<div class="map_area  mb20" id="map"></div>
</div>
// layout 이 적용되어있어서 layout.html 에 api script 적용
	<!-- 카카오 맵 api -->
//<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=인증키&libraries=services,clusterer,drawing"></script>
<script type="application/javascript">
		$(function(){  
			
			var container = document.getElementById('map');
			var options = {
				center: new kakao.maps.LatLng(33.450701, 126.570667),
				level: 3
			};

			var map = new kakao.maps.Map(container, options);
	    		    	
		});				
</script>

 

javascript key 와 활성화가 ON 으로 되어있다는 가정하에

예제에 있는 코드를 그대로 사용하면 지도가 정상적으로 출력된다

(마커와 여러 기능을 사용하기 위해서는 &libraries=services,clusterer,drawing 을 추가해야 한다)

 

 

정상적으로 출력

 

나는 프로젝트가 layout 으로 나누어져 있어서 api script 를 

layout 의 틀이 되는 html 파일에 작성하였다

layout 이 없다면 지도를 사용하려는 해당 html 에 api script 를 추가해 주면 된다

 

 

 

 

마커 추가하기 + 주소로 지도 그리기

 

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

 

 

Sample 메뉴에 들어가면 여러 가지 기능의 예제들이 있다

 

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 마커가 표시될 위치입니다 
var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); 

// 마커를 생성합니다
var marker = new kakao.maps.Marker({
    position: markerPosition
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

 

지도를 출력했던 코드에

마커를 생성하는 코드를 추가해 준다

 

마커 생성

 

 

 

 

 

이번엔 좌표값이 아닌 주소를 이용하여 좌표를 찾아서 맵을 그려본다

<script type="application/javascript">
		$(function(){  
			
			var xx = "";
			var yy = "";
			
			// 주소-좌표 변환 객체를 생성합니다
			var geocoder = new kakao.maps.services.Geocoder();

			// 주소로 좌표를 검색합니다
			geocoder.addressSearch('제주 제주시 첨단로 242', function(result, status) {
			    // 정상적으로 검색이 완료됐으면 
			     if (status === kakao.maps.services.Status.OK) {

			    	 xx = result[0].x;
			    	 yy = result[0].y;
			    	 
			    	 console.log("yyyyyy : " + yy);
			    	 console.log("xxxxxx : " + xx);
			    	 
			    	 
			        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

			        // 결과값으로 받은 위치를 마커로 표시합니다
			        var marker = new kakao.maps.Marker({
			            map: map,
			            position: coords
			        });

			        // 인포윈도우로 장소에 대한 설명을 표시합니다
			        var infowindow = new kakao.maps.InfoWindow({
			            content: '<div style="width:150px;text-align:center;padding:6px 0;">카카오본사</div>'
			        });
			        infowindow.open(map, marker);

			        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
			        map.setCenter(coords);
			    } 
			}); 
			
			
			var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
			var options = { //지도를 생성할 때 필요한 기본 옵션
				center: new kakao.maps.LatLng(yy, xx), //지도의 중심좌표.
				level: 3 //지도의 레벨(확대, 축소 정도)
			};

			var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
	    		    	
		});				
	

</script>

 

 

주소로 좌표를 검색 후 지도 중심과 마커를 생성해준다

 

 

 

 

 

---

 

위의 주소 가이드에도 자세히 알려주고 있지만

변경사항이 반영이 안 되어 있는 부분이 있어서 정리 겸 글을 남긴다