[Kakao Map #1]-기본 설정

호준·2023년 4월 10일
0

kakaoMap

목록 보기
1/1
post-thumbnail

kakao map을 사용하기 위해서는 여러가지 기본설정과 key를 발급 받아야합니다. 그러기 위해서 아래와 같이 따라해주세요.

1. Key 발급

kakao developers

내 애플리케이션을 누릅니다.

로그인이 필요한 작업이기 때문에 카카오계정을 로그인을 하게되면 위와같은 화면이 나옵니다. 화면에 보이는 애플리케이션 추가하기를 클릭합니다.

앱 이름과, 사업자명을 입력하라고 나옵니다. 자신이 만들고자 하는 이름을 적고 서비스 이용의 동의 후 저장을 클릭합니다.

해당 애플리케이션이 생성되고 그곳으로 들어가면 키가 발급된것을 볼 수 있습니다. 저는 javaScript 키를 이용하여 진행하였습니다.

2. 플랫폼 설정


플랫폼 설정하기를 클릭합니다.


자신이 쓸 플랫폼의 종류를 선택하여 등록하면 됩니다. 저는 Web을 사용할 예정이므로 Web 플랫폼 등록을 하였습니다.

자신의 사이트 도메인을 추가해주면됩니다. 저는 local에서 진행하므로 위와 같이 http://localhost:8080 을 도메인 주소를 추가하였습니다.

저장을 하게되면 위와 같이 저가 등록한 Web 플랫폼이 정상적으로 등록된것을 볼 수 있습니다.

3. map 설정

<!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>

위와 같은 html파일을 만들어서 appkey='발급받은 APP KEY를 넣으시면 됩니다.' 이부분에 위에서 발급받은 key를 넣으시면 됩니다.

center: new kakao.maps.LatLng(33.450701, 126.570667) 위도,경도로 설정된 위치가 지도에 나오는 것을 볼 수 있습니다.

참고

https://apis.map.kakao.com/web/guide


잘못된 사실이 있으면 알려주시면 수정하겠습니다. ^&^

profile
도전하자

0개의 댓글