test
Home IT/WEB 카카오맵 api 사용법, 위도 경도 확인 방법

카카오맵 api 사용법, 위도 경도 확인 방법

카카오 맵 api는 웹사이트와 모바일 애플리케이션에서 지도를 이용한 서비스를 제작할 수 있도록 도와준다. 일반적으로 홈페이지에서 자신의 사업처 위치를 공유하기 위해 카카오맵, 네이버지도, 구글지도 api 등을 사용한다.

inline ad

국내에서 네이버지도, 카카오맵 중 2가지 많이 사용되고 있으니 하나 선택해서 사용하면 된다.
이번 포스트에서는 카카오맵 api 사용법에 대해서 살펴보자.

카카오맵 api

준비하기

우선 kakao developers 사이트에 접속하셔서 가입을 한다.
https://developers.kakao.com/

가입후 내 애플리케이션 메뉴에서 애플리케이션 추가하기 버튼을 눌러 애플리케이션을 추가한다.

카카오맵 api 사용법 - 애플리케이션 추가하기
카카오맵 api 사용법 – 애플리케이션 추가하기

애플리케이션엔 앱아이콘, 앱이름, 회사이름 등을 등록할 수 있으며 전 앱 이름과 회사이름만 등록했다.

카카오맵 api  - 애플리케이션 추가하기
카카오맵 api – 애플리케이션 추가하기

등록하면 api key 를 발급받게 되고 나중에 JavaScript 키로 사용할 예정이다.

카카오맵 api - 앱 키
카카오맵 api – 앱 키

그리고 이 api 키를 사용할 웹사이트나 app 주소를 입력한다. 입력하지 않으면 카카오맵 api 를 사용할 수 없으니 꼭 등록해주세요.
내 애플리케이션 > 플래폼 > Web 에서 사이트 도메인을 입력합니다.

플래폼 - 사이트 도메인 등록
플래폼 – 사이트 도메인 등록

kakao map api 활용하여 지도출력

지도를 출력할 영역 생성

id는 “map” 으로 해두었고 가로는 100% 세로는 300px 로 지정하였다.

<div id="map" style="width:100%; height:300px;"></div>

 Javascript API를 불러오기

아래의 코드에서 애플리케이션을 생성하고 발급받은 javascript key 를 추가해주면 된다.

script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

지도를 띄우는 코드 작성

자신이 보여주고 싶은 곳의 위치의 위도, 경도를 확인해서 LatLng(33.484457, 126.806481) 수치를 변경해주면 된다.

<script>
		var container = document.getElementById('map');
		var options = {
			center: new kakao.maps.LatLng(33.484457, 126.806481),
			level: 3
		};

		var map = new kakao.maps.Map(container, options);
</script>

위도 경도 확인 방법

구글지도에서 원하는 곳의 위치를 검색 후 오른쪽 마우스를 클릭하여 이곳을 궁금한가요? 메뉴를 클릭하면 하단에 위도, 경도가 나타난다. 저는 제주공항 위치를 검색 후 위도와 경도를 확인하여 이 값을 복사해서 넣어두었다. 이제 어떻게 지도에 표시 되는지 확인해보자.

구글지도에서 위도 경도 확인
구글지도에서 위도 경도 확인
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>카카오맵 api 사용법</title>
</head>
<body>
	<div id="map" style="width:100%;height:300px;"></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.511423, 126.491316),
			level: 6
		};

		var map = new kakao.maps.Map(container, options);
	</script>
</body>
</html>

짜짠~ 아래에 카카오맵 api 를 활용하여 제주항공 위치를 표시되었다. 하지만 마커가 없어서 정확한 위치를 알 수 없으니 마커를 생성해보자.

마커생성하기

아래 코드를 script 안에 복사해서 넣어보자 조금 전에 위도, 경도 값을 마커가 표시될 위치로 복사한다.

// 마커가 표시될 위치입니다 
var markerPosition  = new kakao.maps.LatLng(33.511423, 126.491316); 

// 마커를 생성합니다
var marker = new kakao.maps.Marker({
    position: markerPosition
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

아래 지도에서 마커가 추가된 것을 확인하실 수 있다.

지금까지 카카오맵 api 사용법에 대해서 살펴보았습니다. 위에 설명드린 것에서 커스텀으로 마커 이미지를 등록한다거나 다양한 제어버튼을 추가한다거나 다양한 예제들을 설명해둔 페이지가 있어요. 그 페이지에서 자기 입맛에 맞게 커스텀도 가능하니 아래 URL 에서 샘플파일을 하나씩 읽어보시길 바랍니다.

카카오맵 api 샘플 : https://apis.map.kakao.com/web/sample/

이전 포스트에서는 약도만들기를 통해 내 블로그에 지도를 추가하는 방법에 대해서 작성해두었습니다. 관심 있으신 분들은 아래 URL 에서 확인해주세요.
카카오맵(다음지도) 블로그에 삽입하는 방법 : https://markettraders.kr/kakao-map/

RECENT POSTS

개미를 퇴치하는 자연적인 방법 중 가장 효과적인 방법 6가지

개미를 자연스럽게 퇴치하는 여러 가지 방법 중 가장 효과적인 몇 가지 방법을 소개하겠습니다. 이 방법들은 모두 집에서 쉽게 구할 수 있는 재료를 사용하여 개미를...

부심장을 지키는 올바른 식단: 먹으면 좋은 음식과 나쁜 음식

부정맥 환자는 심장 건강을 유지하고 증상을 관리하기 위해 특정 음식을 피하고, 심장 건강에 좋은 음식을 섭취하는 것이 중요합니다. 다음은 부정맥 환자가 피해야 나쁜 음식과...

부정맥 arrhythmia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 부정맥(Arrhythmia)은 심장의 정상적인 리듬이 불규칙해지거나 비정상적으로 빨라지거나 느려지는 상태를 말합니다. 이는 심장의 전기적 신호 전달에 문제가 생겨 발생하며, 다양한 원인과 증상을 가지고 있습니다. 원인 부정맥의 원인은...

폐렴 pneumonia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 폐렴(Pneumonia)은 폐의 폐포(air sacs)에 염증이 생겨 액체나 고름이 차는 질환입니다. 주로 세균, 바이러스, 곰팡이 등의 감염에 의해 발생하며, 심한 경우 생명을 위협할 수 있습니다. 원인 폐렴의...