[JavaScript]github.io(깃허브를 이용한 페이지)에 카카오맵 API 사용하기

안녕하세요. 사진찍는 초보개발자입니다.

 

오늘은 간단하게 카카오 API를 이용하여 웹 페이지에 카카오 맵을 띄우는 방법을 소개하겠습니다.

 

 

kakao deverlopers 메인

 

https://developers.kakao.com/

Kakao Developers

먼저 위의 링크로 접속하여 로그인을 해줍니다. (다음 혹은 카카오 계정)

 

 

내 애플리케이션 초기화면

 

로그인 후 상단의 내 애플리케이션 메뉴로 접속하면 위의 사진과 같은 페이지로 이동합니다.

해당 페이지에서 '애플리케이션 추가하기' 를 눌러줍니다.

 

 

애플리케이션 추가하기 화면

 

해당 팝업에 앱 이름과 사업자명을 입력해준 후(개인 포트폴리용이라 저는 사진과 같이 입력했습니다.) 저장버튼을 눌러줍니다.

 

 

애플리케이션을 추가한 후 해당 앱을 클릭하면 위의 사진과 같은 페이지로 이동하게 됩니다.

해당 페이지까지 왔다면 이제 지도를 띄우기 위한 기본 작업이 거의 다 끝나가게 됩니다!

 

 

 

좌측의 메뉴들 중에 '플랫폼' 메뉴를 클릭해서 위의 사진과 같은 페이지로 이동하게 됩니다.

해당 페이지에서 하단의 'Web 플랫폼 등록' 버튼을 클릭합니다.

 

 

 

도메인 주소는 위의 사진과 같이

https://깃허브아이디.github.io

로 입력한 후 저장해주시면 됩니다.

 

 

정상적으로 Web 플랫폼 등록이 완료됐다면 좌측의 '앱 키' 메뉴를 접속합니다.

해당 페이지에 들어가면 위의 사진과 같은 앱 키 리스트들이 나옵니다.

웹 페이지에 카카오 맵 API를 띄우기 위해서는 세 번째 'javascript 키'가 필요합니다.

 

 

마지막으로 기본적인 코드 작성법입니다.

가장 중요한 저 하얀색 부분에 발급 된 JavaScript Key 값을 넣어주시면 됩니다.

위의 사진과 같이 코드를 작성한 후 git에 올린 후 github repository를 페이지로 만든 주소로 접속하게 되면

카카오 맵 API가 적용된 모습을 볼 수 있습니다.

 

 

git page에 적용된 모습. 주소 https://kkt9102.github.io/kakaoMap_API_Test/

 

-해당 작업 git repository 가기

github.com/kkt9102/kakaoMap_API_Test

-해당 작업 git page 가기

kkt9102.github.io/kakaoMap_API_Test/

 

apis.map.kakao.com/web/

위의 링크로 가면 카카오 맵 API에 대해 보다 자세하고 다양한 가이드가 있습니다.