API/KakaoAPI

[KakaoAPI] 카카오 지도API 이용하기

LeeDaniel 2024. 11. 25. 15:23

[ 카카오 지도API 이용해보기]


1. https://developers.kakao.com/ 에 접속해 로그인을 한다


2. 상단의 [내 어플리케이션] 메뉴를 누른다


3. 애플리케이션 추가하기 를 누른다


4. 앱이름, 회사명, 카테고리를 작성한다(test용이니까 아무렇게나 입력해도됨)


5. 방금 추가한 앱이 생성된것이 보인다. 눌러준다


6. 좌측 상단의 메뉴를 눌러준다


7. 플랫폼을 눌러준다


8. 본인이 API사용을 원하는 플랫폼을 선택한다
    나는 웹에서 test할것이기때문에 Web플랫폼등록을 선택한다


9. 원하는 프로토콜,도메인,포트를 작성후 저장버튼을 눌러준다


10. 다시 좌측상단 메뉴를 눌러준다. API Key를 얻으러 가야한다.


11. 앱 키 를 눌러준다


12. 나는 html에서 js로 사용할것이기때문에 js키를 복사를 눌러준다


13. 발급받은 JS API key를 이용해 html에서 카카오맵 띄워보기
https://apis.map.kakao.com/web/guide/
 
해당 페이지에 가면 잘설명이 되어있는데
<!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>
appkey=  이 부분에 위에서 발급받은 API key를 작성해주면 된다


14. 결과
반응형