▹ 주요 언어/JavaScript

[카카오 지도] KAKAO 지도 생성하기 + 예제

기록원장 2025. 1. 28. 18:00
반응형

◆ 1. KAKAO 지도 API 로드하기

애플리케이션 등록 후 발급받은 APP KEY(앱 키)를 사용해 KAKAO 지도를 그리는 API를 Javascript에서 아래와 같이 호출한다.

『 APP KEY(앱 키) 발급 방법 - [카카오 지도] KAKAO 지도 앱 키(APP KEY) 발급 및 WEB 플랫폼 등록 방법』

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"></script>

KAKAO 지도 API를 로딩하는 <script> 태그의 위치는 HTML파일 안의 <head> 또는 <body> 안에 넣으면 되지만, 반드시 지도를 띄우는 실행 코드보다는 먼저 선언되어야 한다.

 

 

 

◆ 2. 지도를 담을 영역 선언하기

지도를 담을 영역을 <div></div> 태그를 사용해 선언해준다.

 

이때, <div> 태그의 id 값은 지도가 표시될 위치를 지정하는 데 사용되므로 반드시 설정해야 하며, 지도의 크기는 style 속성에서 지정한다.

<div id="mainMap" style="width:100%;height:700px;"></div>

 

 

 

◆ 지도 생성하기

new 연산자를 이용하여 지도를 표현하는 Map 클래스의 인스턴스를 생성한다.

var mapContainer = document.getElementById('mainMap')  //지도를 표시할 영역의 div
var mapOption = {
   //지도 옵션 설정
   center: new kakao.maps.LatLng(33.450701, 126.570667),  //지도의 중심좌표를 지정(위도, 경도)
   level: 3,  //지도의 초기 줌 레벨을 지정
};

// 지도를 표시할 영역의 div와 지도 옵션으로 지도를 생성
var map = new kakao.maps.Map(mapContainer , mapOption);

지도 옵션 설정 시 지도의 중심좌표를 지정하는 center 속성은 지도를 생성할 때 반드시 필요한 필수 속성 값으로, 미설정 시에는 아래와 같이 지도가 제대로 생성되지 않는다.

center 옵션 미설정

 

 

◆ 예제

<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"></script>
	</head>
	<body>
		<div id="mainMap" style="width:100%;height:700px;"></div>
		<script>
			$(document).ready(function() {
				var mapContainer = document.getElementById('mainMap');
				var mapOption = {
					center: new kakao.maps.LatLng(33.450701, 126.570667),
					level: 3
				};
				var map = new kakao.maps.Map(mapContainer, mapOption);
			});
		</script>
	</body>
</html>

 

[카카오 지도] KAKAO 지도 앱 키(APP KEY) 발급 및 WEB 플랫폼 등록 방법

[카카오 지도] KAKAO 지도 생성하기 + 예제

[카카오 지도] KAKAO 지도에 컨트롤(지도타입, 줌) 추가 + 예제

참조
지도 생성하기
https://apis.map.kakao.com/web/sample/basicMap/
글 내용 중 잘못된 부분이 있거나, 첨부하실 내용이 있으시면 댓글로 남겨주세요. 공부하는데 많은 도움이 됩니다.
-- 기억의 유효기간은 생각보다 짧다. --
반응형