안녕하세요. 언제나휴일의 언휴예요.
이번에 할 작업은 Kakao 지도 API에서 제공하는 기본 지도를 표시하는 작업입니다.
- 선행 작업
Windows 운영체제의 기능 켜기를 통해 IIS(인터넷 정보 서비스)를 운용할 수 있게 설정들은 하셨죠.
아직이라면 아래 게시글을 참고하세요.
이번 프로젝트는 “Kakao 개발자 센터”의 지역 검새 서비스와 지도 API를 사용한다고 했어요.
아직 가입 및 내 애플리케이션 등록을 하지 않으신 분들은 아래 게시글을 참고하세요.
- 작업 시작
카카오 개발자 센터의 내 애플리케이션을 선택하세요.
플랫폼 중에 Web을 선택합니다.
Web 플랫폼 등록을 선택하세요.
http://localhost를 사이트 도메인으로 저장합니다.
카카오 개발자 센터의 상단 메뉴에서 “문서”를 선택하세요. 메뉴얼이 있는 곳입니다.
문서 항목 중에서 “지도”-“JavaScript”를 선택합니다.
이제 Kakao 지도 API 페이지입니다. “시작하기”를 누르세요.
카카오 지도 API를 사용할 때 인증은 JavaScript키를 사용한다는 것에 기억하세요.
본문 내용 중에 지도를 표시하기 위한 기본 html 코드를 제공하고 있습니다.
제공하는 코드에서 “appkey=” 부분에 발급받은 APP KEY를 넣으라는 구문이 보이시죠.
다음 코드가 카카오 지도 API에서 사용하라는 html 기본 코드입니다.
(appkey 부분은 내 애플리케이션에 있는 JavaScript 키로 대체해야 합니다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</title>
</head>
<body>
<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>
<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>
이러한 코드로 basicmap.html 파일을 만들어서 가상 디렉토리로 사용하는 디렉토리로 이동시켜 주세요.
(제가 사용한 폴더는 “C:\web\KMap”입니다.)
웹 브라우저에서 http://localhost/kmap/basicmap.html 도메인 주소를 입력하면 다음과 같이 지도가 나타납니다.
