프로젝트에서 지도를 클릭해 위/경도(위도, 경도) 좌표를 처리해야하는 기능 구현이 필요하게 되었다.
구글링을 통해서, 네이버맵보다 카카오맵이 개발이 용이하고 로딩이 빠르다고 하여 카카오맵으로 진행하였다.
(카카오맵 vs 네이버맵)
기본적으로 카카오에서 케이스별로 API 문서와 샘플을 잘 만들어두었지만, 상황별로 분류되어있어,
API KEY를 받는 것부터 맵에 마커를 표시(출력)하는 것까지는 이렇게 따로 묶어서 정리해두려고 한다.
[ API KEY 발급 방법 ]
API KEY는 개인이 외부의 API를 사용할 때 접근할 수 있도록 주어지는 키이다.
그렇기 때문에, 카카오맵 API를 사용하기 위해서는 API KEY를 발급 받아야하는데 발급 방법은 매우 간단하다.
ⓞ 아래의 카카오 개발자사이트에서 개발자 등록을 진행한다(회원가입)
① 아래의 카카오맵 API 링크로 접속한다.
② 화면 오른쪽 상단의 APP KEY 발급 버튼을 클릭한다.
③ 화면 중앙의 애플리케이션 추가하기 버튼을 클릭한다.
④ 앱 이름, 사업자명을 입력한다. (앱 아이콘은 있을 시 선택)
- 앱 이름 : 웹/앱 등 API를 사용할 시스템 명
- 사업자명 : 사업자 또는 본인의 이름
⑤ 저장 후, 해당 앱을 클릭해서 들어가보면 앱 키가 나온다.
여기서 오늘 우리가 쓰게 될 것은 JavaScript 키이다.
발급은 이렇게 순식간에 끝났다.
하지만!!! 아직 사용을 위해서 추가해줄 것이 딱 하나 더 남았다.
바로, API를 사용할 곳을 알려주는 '플랫폼 등록'이다.
플랫폼 등록을 하지 않으면 해당 시스템에서 API를 제대로 사용할 수 없다.
그렇기 때문에 다음과 같이 추가를 해준다.
ⓐ 애플리케이션에 들어간 후, 왼쪽 카테고리에서 플랫폼을 선택한다.
ⓑ Android / iOS / Web 으로 플랫폼이 구분되며, Web의 경우 Web 플랫폼 등록을 클릭하면 다음과 같이 팝업이 출력된다.
※ 사이트 도메인 항목에 사용할 도메인을 작성하며, localhost의 경우 아래와 같이 포트번호와 함께 저장해주면 된다.
여러 곳에서 사용할 경우, 엔터로 개행(한 줄 띄우기)하여 추가해주면 된다.
주의 사항은, 도메인 기재시 마지막에 /를 붙이지 않는 것이다.
예를 들어 localhost:8080을 localhost:8080/ 으로 적으면 저장되지 않는다.
ⓒ 저장이 완료되면 항목이 리스트에 정상적으로 출력되고 API를 사용할 준비가 끝났다.
[ API 적용 방법 ]
ⓐ Import script
<!-- JSP / HTML -->
<head>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={APP KEY}"></script>
</head>
head 태그나 body 태그 등 본인이 자바스크립트파일을 import하는 위치에 위 코드의 script태그 부분을 삽입한다.
이 때 {APP KEY} 부분은 괄호( '{}' ) 없이 본인이 위에서 발급받았던 JavaScript 앱키를 기재한다.
ⓑ 카카오맵을 표시할 div 영역 생성
<!-- JSP / HTML -->
<div id="map" style="width:100%; height:500px;"></div>
이 때, 주의해야할 점은 div에 너비와 높이를 style로 지정해야한다는 것이다.
지정하지않으면, 맵 UI의 사이즈가 설정되지 않아 출력되지 않는 경우가 발생한다.
ⓒ 코드 작성(JavaScript)
<!-- JavaScript -->
//지도 설정
const mapContainer = document.getElementById('map'),
mapOption = {
center: new kakao.maps.LatLng(36.5,127.5), // 지도의 중심 좌표(임의 설정)
level: 13 // 지도의 확대 레벨(임의 설정)
};
//설정한 지도 생성
const map = new kakao.maps.Map(mapContainer, mapOption);
//마커 초기화(초기화 시 지도에 미리 지정 가능 : 카카오맵 API 문서 참조)
const marker = new kakao.maps.Marker();
//카카오맵 클릭 이벤트 추가
kakao.maps.event.addListener(map, 'click', (mouseEvent) => {
//클릭한 위도, 경도 정보 불러오기
const latlng = mouseEvent.latLng;
//마커 위치를 클릭한 위치로 이동
marker.setPosition(latlng);
marker.setMap(map);
alert(`위도 : ${latlng.getLat()}, 경도 : ${latlng.getLng()}`);
});
카카오맵 API 문서에서는 마커가 초기에 바로 지도에 표시되는데,
프로젝트에서는 마커가 초기에는 표시되지 않아야 했기에 일부 코드를 수정했다.
위와 같이 코드를 작성하면, 카카오맵에 마우스 클릭 시
클릭한 지점의 위도와 경도값이 얼럿창으로 출력되는 것을 확인할 수 있다!
※ mapOption의 level 값은 커질수록 맵이 축소된다. (소축척 : 더 넓은 지역을 한 번에 볼 수 있게 됨)
[ 만났던 Error 목록 ]
1. Cannot read properties of undefined (reading 'defaultView')
이 에러는 defaultView가 undefined라는 뜻이다.
구글링 결과, 이 에러는 카카오맵을 띄울 div에 접근할 수 없을 때, 주로 발생하는 것으로 확인되었다.
그러므로, div(위의 예제에서는 id="map" 인 div) 가 JSP/HTML 등에 잘 작성되어있는지 확인이 필요하다.
혹은, id 속성값 등의 확인이 필요하다.
그것도 아니라면 javascript가 아닌 jquery로 작성했는지 확인해보면 된다.
$('#map')[0]과 같이 처리해야하는데 $('#map')으로 처리한 것이 아닌지 확인해보자!
2. Cannot read properties of undefined (reading 'maps')
구글링 결과, 이 에러는 카카오맵 API '플랫폼'에 등록되지 않은 도메인에서 카카오맵 API를 접근할 때 발생하는 것으로 확인되었다.
카카오맵 API를 사용할 주소는 꼭 플랫폼에 등록해두자!
3. 브라우저 콘솔창에서 에러가 없는데, div에서 카카오맵 미출력
div의 style 속성의 width와 height로 사이즈가 지정되어있는지 확인하고, 미지정시 속성값 설정
▼▼▼ 기타 자세한 기능 및 이용 방법은 아래의 카카오맵 API 샘플/문서 링크를 참고해주세요.
https://apis.map.kakao.com/web/sample/
🤞 도움이 되셨기를 바랍니다. 한 번의 클릭과 댓글은 어딘가의 누군가에게 진실로 큰 힘이 됩니다. 🐱🏍
댓글