카카오 맵 api는 웹사이트와 모바일 애플리케이션에서 지도를 이용한 서비스를 제작할 수 있도록 도와준다. 일반적으로 홈페이지에서 자신의 사업처 위치를 공유하기 위해 카카오맵, 네이버지도, 구글지도 api 등을 사용한다.
국내에서 네이버지도, 카카오맵 중 2가지 많이 사용되고 있으니 하나 선택해서 사용하면 된다.
이번 포스트에서는 카카오맵 api 사용법에 대해서 살펴보자.
카카오맵 api
준비하기
우선 kakao developers 사이트에 접속하셔서 가입을 한다.
https://developers.kakao.com/
가입후 내 애플리케이션 메뉴에서 애플리케이션 추가하기 버튼을 눌러 애플리케이션을 추가한다.
애플리케이션엔 앱아이콘, 앱이름, 회사이름 등을 등록할 수 있으며 전 앱 이름과 회사이름만 등록했다.
등록하면 api key 를 발급받게 되고 나중에 JavaScript 키로 사용할 예정이다.
그리고 이 api 키를 사용할 웹사이트나 app 주소를 입력한다. 입력하지 않으면 카카오맵 api 를 사용할 수 없으니 꼭 등록해주세요.
내 애플리케이션 > 플래폼 > Web 에서 사이트 도메인을 입력합니다.
kakao map api 활용하여 지도출력
지도를 출력할 영역 생성
id는 “map” 으로 해두었고 가로는 100% 세로는 300px 로 지정하였다.
<div id="map" style="width:100%; height:300px;"></div>
Javascript API를 불러오기
아래의 코드에서 애플리케이션을 생성하고 발급받은 javascript key 를 추가해주면 된다.
script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
지도를 띄우는 코드 작성
자신이 보여주고 싶은 곳의 위치의 위도, 경도를 확인해서 LatLng(33.484457, 126.806481) 수치를 변경해주면 된다.
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.484457, 126.806481),
level: 3
};
var map = new kakao.maps.Map(container, options);
</script>위도 경도 확인 방법
구글지도에서 원하는 곳의 위치를 검색 후 오른쪽 마우스를 클릭하여 이곳을 궁금한가요? 메뉴를 클릭하면 하단에 위도, 경도가 나타난다. 저는 제주공항 위치를 검색 후 위도와 경도를 확인하여 이 값을 복사해서 넣어두었다. 이제 어떻게 지도에 표시 되는지 확인해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>카카오맵 api 사용법</title>
</head>
<body>
<div id="map" style="width:100%;height:300px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.511423, 126.491316),
level: 6
};
var map = new kakao.maps.Map(container, options);
</script>
</body>
</html>짜짠~ 아래에 카카오맵 api 를 활용하여 제주항공 위치를 표시되었다. 하지만 마커가 없어서 정확한 위치를 알 수 없으니 마커를 생성해보자.
마커생성하기
아래 코드를 script 안에 복사해서 넣어보자 조금 전에 위도, 경도 값을 마커가 표시될 위치로 복사한다.
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(33.511423, 126.491316);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);아래 지도에서 마커가 추가된 것을 확인하실 수 있다.
지금까지 카카오맵 api 사용법에 대해서 살펴보았습니다. 위에 설명드린 것에서 커스텀으로 마커 이미지를 등록한다거나 다양한 제어버튼을 추가한다거나 다양한 예제들을 설명해둔 페이지가 있어요. 그 페이지에서 자기 입맛에 맞게 커스텀도 가능하니 아래 URL 에서 샘플파일을 하나씩 읽어보시길 바랍니다.
카카오맵 api 샘플 : https://apis.map.kakao.com/web/sample/
이전 포스트에서는 약도만들기를 통해 내 블로그에 지도를 추가하는 방법에 대해서 작성해두었습니다. 관심 있으신 분들은 아래 URL 에서 확인해주세요.
카카오맵(다음지도) 블로그에 삽입하는 방법 : https://markettraders.kr/kakao-map/