안녕하세요 무택입니다 :)
오늘은 카카오 지도를 불러오는 방법에 대해 써보려고 합니다. 웹사이트를 구현하다 보면 지도 기능이 필요한 경우가 생기는데 보통 구현하기 힘들 경우 이미지로 대체하는 경우가 있습니다. 하지만 확실히 지도를 불러오는 방법이 사용성이 좋기 때문에 아래 방법을 보면서 따라 해보시길 바랍니다😊
카카오 지도 불러오는 방법
크게 순서는 이렇게 됩니다.
1. 카카오 API 제공 사이트에서 애플리케이션 기능으로 고유 API키를 발급
2. 지도 기능을 사용할 수 있는 코드를 복사해 와 고유 API키를 입력
3. 기타 커스텀 기능을 활용하면 다양하게 사용이 가능.
자세한 설명은 아래를 참고해 주세요.
1. 카카오 지도 api 사이트에서 "카카오 개발자사이트" 들어가기
2. 로그인 후 시작하기를 눌러줍니다.
3. 애플리케이션 추가 버튼 클릭
4. 위 정보를 임의로 설정해서 입력해 줍니다.
5. 만든 애플리케이션을 클릭해서 들어가면 위 화면이 나오는데 여기서 플랫폼을 설정해야 합니다.
6. 플랫폼 등록 클릭
7. 여기에 지도를 사용할 도메인을 입력해 줍니다.
<!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>8. 카카오 맵 사이트에 있는 지도 사용 코드를 가져와줍니다.
9. 애플리케이션 정보에 나와있는 REST API키 값을 복사해서 위 8번에서 불러온 코드의 script 부분에 넣어줍니다. 그러면 정상적으로 기본적인 카카오 지도 기능을 사용할 수 있습니다.
'🧑💻개발 > 라이브러리' 카테고리의 다른 글
| [라이브러리]Slick-slider의 dot을 커스텀할 수 있는 방법 (0) | 2023.07.18 |
|---|---|
| [API 오류] 카카오 지도 간단하게 오류 해결 방법(VScode 라이브서버) (0) | 2023.07.03 |
| [라이브러리]다양한 애니메이션을 간단하게 사용해보자(animate.css) (0) | 2023.05.08 |
| 박스 안에서 텍스트 올라오는 애니메이션(animate 라이브러리 활용) (0) | 2023.05.02 |
| [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer)+코드 간소화 (0) | 2023.04.02 |
