티스토리에 카카오맵(로드뷰)을 추가해보자(kakao map api)-1

출처 : 카카오 맵 API

가장 중요한 지도 API는 무료로 제공됩니다.

추가 방법

일반적으로 2D 지도 첨부는 티스토리에서 지원을 합니다.

2021/01/01 - [IT/이것저것] - 티스토리에 카카오 지도를 추가하기

티스토리에 카카오지도를 추가하기

분명히 로드뷰가 더욱 도움이 되는 경우가 많은데, 아무리 찾아봐도 블로그에서 찾기 쉽지 않았고..

따라 하기 어려워서 조금 더 쉽게 포스팅을 하고자 합니다.

 

가장 중요한 것은 두가지입니다.

1. Kakao Map API를 사용하기 위한 앱 키(App key)를 얻기 위하여카카오 개발자(Kakao Developers) 등록(developers.kakao.com/)

2. Kakao Map API를 사용(apis.map.kakao.com/web/)

사실 카카오 지도  Web API에서 친절하게 가이드가 되어있습니다만 저 같은 초보는 어렵기 때문에 하나하나 따라가 보려고 합니다.

순서

회원가입은 되어있다는 전제조건하에 설명합니다.

1. 카카오 개발자 사이트 (https://developers.kakao.com) 접속

로그인 후 내 애플리케이션에 접속합니다.

2. 개발자 등록 및 앱 생성

애플리케이션 추가하기를 선택하고 해당 정보를 입력합니다.

앱 이름, 사업자 명을 입력 후 저장하면, 앱 생성이 완료됩니다.

3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록

 

사이트 도메인을 본인의 블로그 주소로 하시면 안 될 거예요.

왜냐하면 제가 해봤거든요..

이 곳에서 멘붕이 올뻔했지만, 정답은 분명히 있습니다.

https://notice.tistory.com/1784

개인 도메인(2차 블로그 주소) 사용을 위한 DNS 설정하기

 티스토리의 CNAME레코드를 등록하니 정상이라고 나왔습니다.

출처 : 티스토리

저는 blog.tistory.com으로 등록하였습니다.

그리고 Redirect URI를 등록하였습니다.

자세한 내용은 아래 주소를 참조해주세요.

developers.kakao.com/docs/latest/ko/kakaologin/prerequisite

4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인]을 등록합니다. (예: http://localhost:8080)

이 부분은 생략하였습니다. 아마 3번에 내용이 포함되어 있지 않나 싶습니다.

5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.

앱 키는 kakao developers - 요약 정보에 있습니다.

 

Kakao map api를 사용하기 위하여 JavaScript 앱 키가 필요합니다.

이 글에서 가장 중요한 부분이기도 합니다.

이제 API를 사용하면 됩니다.