(1) 카카오 지도 API - 지도 만들기

카카오 지도 API 개발자 홈페이지 (https://apis.map.kakao.com/web/)

본 포스팅에서는 카카오 지도 API를 이용하여 지도를 생성하는 방법에 대해 작성합니다. 모든 Open API가 그렇듯이 유료이건 무료이건 서비스를 활용하기 위해서는 개인전용 API(Private API Key)를 발급받아야 합니다.

카카오톡 아이디가 있으신 분은 별도의 회원가입이 필요없습니다. 카카오 지도 API 개발자 센터에 로그인 후 API키를 발급받으신 후에 해당 항목의 “JavaScript 키”를 이용하도록 합시다.

카카오 지도 API 개발자 홈페이지의 Sample 항목 : 초보자도 쉽게 따라할 수 있도록 인터페이스가 구성되어 있다

제 예전 포스팅을 보신 분들은 아시겠지만 구글 지도와 카카오 지도의 가이드는 비슷비슷합니다. 초보자분들이 유용하게 사용하실 수 있는 메뉴는 바로 예제가 있는 Sample 메뉴이지요.

영어만 보다가 한글을 보니까 가독성이 확 좋아집니다. 먼저 가장 기본적인 ‘지도 생성하기’를 진행해보겠습니다. 메뉴를 클릭하면 우측에 스크립트 실행결과를 확인할 수가 있고 스크립트 원문과 CSS가 포함된 HTML을 확인할 수 있습니다.

또한 모든 예제의 우측 하단에는 ‘직접 해보기’가 있는데요. 이것은 카카오에서 제공하는 자바 스크립트 실행 Console로서 예제의 스크립트를 실행할 수 있으며 간단한 수정을 통해 결과를 바로바로 확인할 수 있는 장점이 있습니다.

모든 예제의 오른쪽 하단에는 [직접 해보기]가 있다. 해당 버튼을 클릭하면...

카카오 웹에서 지원하는 Console 창에서 스크립트를 실행하여 결과를 확인해 볼 수 있다. 아래는 스크립트 전문

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>지도 생성하기</title>
    
</head>
<body>
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); 
</script>
</body>
</html>

스크립트 전문은 간단합니다. 먼저 지도는 태그에 map으로 정의가 되어있습니다. 발급받은 API Key는 해당 위치에 잘 복사 & 붙여넣기 해주시면 됩니다. 이후 카카오 지도 API를 가져오는 스크립트 구문이 있고 getElementById에 의해 지도 중심점(KaKao 스페이스닷원)과 확대 레벨(3)이 옵션으로 정의가 되었습니다.

그리고 해당 변수들은 카카오 맵을 생성(kakao.maps.map)하는 변수 map (var map)에 담고 최종적으로 출력하지요. 단, 구글 지도와 다르게 주의하셔야 할 점은 구글 지도의 경우 defer 속성에 의해 API를 불러오는 스크립트의 위치와 맵의 위치가 전혀 상관이 없지만

<script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    
    
    /**구글 지도 API의 경우 맵이 위의 스크립트 앞에 있어도, 뒤에 있어도 전혀 상관없다 **/

카카오 지도의 경우 반드시 API를 불러오는 스크립트가 태그에 의해 선언된 map보다 ‘반드시 뒤’에 있어야 한다는 점입니다.

<div id="map" style="width:100%;height:350px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey="발급받은 API KEY를 사용하세요" defer></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); 
</script>


/** 카카오의 경우 지도 API 관련 스크립트는 반드시 <div id="map"></div> 뒤에 있어야 한다 **/

이는 카카오 지도에서 스크립트에서 defer나 async의 기능을 지원하지 않기 때문인 것으로 보입니다. 따라서 카카오 지도에서 지도 API를 활용하기 위해서는

(1) div id – map
(2) 카카오 지도 API 로드 스크립트
(3) 지도 기능 구현 스크립트

의 순서를 반드시 지켜주시기 바랍니다.

2022.12.17 - [정보기술] - (2) 카카오 지도 API - 단일 마커 표시하기

(2) 카카오 지도 API - 단일 마커 표시하기

2022.12.17 - [정보기술] - (1) 카카오 지도 API - 지도 만들기 2022.12.17 - [정보기술] - (2) 카카오 지도 API - 단일 마커 표시하기 2022.12.17 - [정보기술] - (3) 카카오 지도 API - 다중 마커 표시하기 2022.12.17 - [

iftraveler.tistory.com

'정보기술' 카테고리의 다른 글

(3) 카카오 지도 API - 다중 마커 표시하기 (0)	2022.12.17
(2) 카카오 지도 API - 단일 마커 표시하기 (0)	2022.12.17
카카오 지도 API 활용하기 - 에어비엔비 스타일 사이트 만들기 (1)	2022.12.17
(12) 구글 지도 API - 위치기반 서비스 제공 (끝) (1)	2022.12.14
(11) 구글 지도 API - 좌표 DB 불러오기 (xml 이용) (0)	2022.12.14

당신과 나의 어바웃 라이프

(1) 카카오 지도 API - 지도 만들기

'정보기술' 카테고리의 다른 글

댓글

티스토리툴바

(1) 카카오 지도 API - 지도 만들기

'정보기술' 카테고리의 다른 글

관련글

댓글

티스토리툴바