도라에몽주머니

[Web/#00] Kakao 지도 API를 활용해 웹페이지에 지도 표시하기 본문

Project

[Web/#00] Kakao 지도 API를 활용해 웹페이지에 지도 표시하기

에몽쓰 2022. 8. 21. 04:25

카카오 지도 API를 활용해 토이프로젝트를 하나 해보려고 합니다.

 

우선 프로젝트 시작을 위해 웹페이지에 API를 활용해 카카오맵을 띄우는 것부터 해보겠습니다.

 

-

 

✔️ APP KEY 발급

아래 페이지에서 개발자 계정을 만들고 로그인을 합니다.

https://developers.kakao.com/

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

로그인을 한 후, [내 애플리케이션] 에서 [애플리케이션 추가하기] 를 클릭합니다.

앱 이름을 작성한 후 저장을 눌러줍니다.

[웹] - [플랫폼] - [Web 플랫폼 등록] 순으로 들어가 원하는 사이트 도메인을 등록해준 후, [요약 정보] 의 [JavaScript 키] 를 복사해 사용하면 됩니다.

 

 

✔️ 웹페이지에 지도 띄우기

발급받은 APP KEY를 사용하세요 대신 위에서 발급받은 JavaScript 키를 넣어주면 된다.

 

  • 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>지도 생성하기</title>
<style>
    * {margin: 0; padding: 0;}
</style>    
</head>
<body>
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:100vh;"></div> <!-- 지도 화면에 꽉차게 -->

<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=4ec5cf372d05c308d20fbbf8fe09f4c3"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); 
</script>
</body>
</html>

 

 

  • 결과

저작자표시 (새창열림)

'Project' 카테고리의 다른 글

[Windows / Tensorflow] Windows 환경에서 텐서플로(Tensorflow)설치하기  (0) 2021.06.22
[MacOS / Matlab] MacOS에서 Matlab 설치하기  (0) 2021.03.02
'Project' Related Articles more