참고 사이트 : https://developers.kakao.com/
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
1. 카카오맵으로 지도 띄우기
1) API키 받기
앞서 살펴보았던 카카오 우편번호 서비스는 특별한 API 키 없이도 사용이 가능한 오픈 소스였다.
하지만 이 카카오맵은 API를 따로 생성해야한다.
그렇기에 회원가입 및 로그인이 필수이다.
회원가입과 로그인을 마치고 API키를 받아오자.
위 이미지에서 JavaScript 키를 복사해두면 된다.
2) 코드 복사하기
이제 카카오 Developers 사이트의 지도 안에 들어가 가이드 항목에 있는 코드를 그대로 VS Code로 옮겨주자.
그리고 몇가지만 더 만져주면 정상적으로 지도가 사이트 안으로 들어가게 된다.
- API 키 설정해주기
- script의 src가 되는 웹사이트 앞에 프로토콜 제대로 붙여주기
- 시작지점의 좌표 설정하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>01.Kakao 지도 시작하기</title>
</head>
<body>
<!-- 지도를 표기할 곳 -->
<!-- <div id="map" style="width:500px;height:400px;"></div> -->
<!-- 지도를 전체화면 크기로 지정 -->
<div id="map" style="width:100%;height:100vh;"></div>
<!--
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
-->
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=비밀"></script>
<script>
var container = document.getElementById('map'); // 지도를 표시할 div
var options = {
center: new kakao.maps.LatLng(37.2665172, 126.8805282), // 지도 중심 좌표
level: 3 // 지도 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성시키기
var map = new kakao.maps.Map(container, options);
</script>
</body>
</html>주석을 달아두었으니 잘 확인해보자.
API키는 따로 달아두지 않았다(비밀~~).
라이브 서버를 켜서 사이트를 열어보니 잘 구동이 된다.
'⁂ Java Script > : 기본 익히기' 카테고리의 다른 글
| [JS] #13-1 오픈소스 활용하기 : 카카오 우편번호 서비스 (0) | 2022.08.17 |
|---|---|
| [JS] #12 JavaScript JSON (0) | 2022.08.17 |
| [JS] #11 This (0) | 2022.08.17 |
| [JS] #10 자바 스크립트에서 스타일(.CSS) 접근하기 (0) | 2022.08.17 |
| [JS] #9-2 유효성 검사 - 회원가입틀 만들기 2 (0) | 2022.08.16 |