문제 상황
회사에 들어와서 가장 처음 맡은 업무는 카카오 맵 API를 이용해 지도에 핸드폰 대리점들의 위치를 찍는 일이었다. 프로젝트 당시에도 카카오 맵 API를 사용하긴 했지만 내가 맡은 기능은 아니어서 좀 겁이 났다. 그래도 생각보다 카카오 맵 API 문서가 너무 친절해서 잘 할 수 있었다!
공식문서도 참고!
https://apis.map.kakao.com/web/guide/
준비하기
💡카카오 맵을 이용하기 위해서는 먼저 키를 발급받아야 한다. 아래와 같이 따라해보자.
1️⃣카카오 개발자 사이트에 접속한다.
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
2️⃣개발자 등록을 하고 앱을 생성한다.
👉🏻내 애플리케이션에 들어가 생성하면 된다.
🐰블로그 작성용으로 앱 새로 생성하는데 앱 이름 3번이나 반려돼서 고생이어따ㅋㅋㅋ
👉🏻다 작성하고 앱을 생성했다면 들어가서 정보를 확인해보자! 앱 키가 무려 4개나 있는데 카카오맵을 사용하려면 JavaScript키를 사용하면 된다.
3️⃣ 웹 플랫폼을 추가한다.
📌[플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
👉🏻이렇게 들어가서
👉🏻도메인을 등록해준다! 나는 일단 로컬 주소만 적어주었다. 필요한 경우 서비스 도메인도 적어주고 기본 도메인에 서비스 도메인을 등록하면 될 것 같다.
🐰이제 준비작업은 끝! 본격적으로 지도를 띄워보도록 하자!
지도 띄우기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
<title>Kakao 지도 시작하기</title>
</head>
<body>
<div id="map" style="width:500px;height:400px;"></div>
<script>
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>
</body>
</html>👉🏻공식문서에서 긁어온 코드이다. 중요 부분만 떼어서 분석해보자!
<div id="map" style="width:500px;height:400px;"></div>👉🏻지도를 담는 영역이다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>👉🏻지도를 그리는 Javascript API키를 불러온다. 아까 위의 과정에서 보았던 앱키에서 Javascript 키를 넣어주면 된다.
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴👉🏻지도를 띄우는 코드이다. 지도를 띄우기 위한 Map 객체에는 2가지 인자가 필요하다. container는 지도를 담는 영역이고 options는 지도를 생성할 때 적용시킬 조건이다.
👉🏻container는 id값을 이용해 지도를 담는 영역을 불러와 넣어준다.
👉🏻options는 따로 설정해준다. center는 지도의 위도와 경도를 순서대로 넣으면 되고 필수 요소이다. level은 지도의 레벨이다.
🐰이렇게 지도가 뜨는 모습을 볼 수 있음!
'그 땐 IT활동했지 > 그 땐 영일영 근무했지' 카테고리의 다른 글
| [010/API] Kakao Map API | 가게 위치 ajax로 불러오기 (0) | 2022.04.11 |
|---|---|
| [010/API] Kakao Map API | 위치 표시하기 (0) | 2022.04.10 |
| [010/JS Library] chart.js | 그래프 커스텀하기 (함수편) (0) | 2022.03.24 |
| [010/JS Library] chart.js | 그래프 커스텀하기 (일반편) (0) | 2022.03.23 |
| [010/JS Library] chart.js | 범례 커스텀하기(3.7.1 version) (0) | 2022.03.21 |
