[Web/Map] Kakao 지도 API 키 발급 및 HTML5 + Javascript 적용/위도경도 찾는 법

FrontEnd

[Web/Map] Kakao 지도 API 키 발급 및 HTML5 + Javascript 적용/위도경도 찾는 법

74059 2023. 7. 28. 11:58

포스터는 다음과 같이 진행될 예정.

[Kakao 지도 API를 이용한 길찾기 웹 만들기]

(1) Kakao 지도 API 키 발급 및 HTML5 + Javascript 적용 𖦹현재 포스터𖦹

(2) Javascript를 이용한 Kakao 지도 Marker, Polyline, InfoWindow 이용해보기

(3) 길찾기 API ODsay, Python을 이용한 실시간 길찾기 데이터 불러오기

(4) 백엔드로 불러온 실시간 길찾기 데이터 지도에 polyline 찍어보기

동기들과 구현해본 길찾기 서비스에 대한 기록.

학부생 수준으로 진행한 것이라 메모리 사용량이든 디스크 사용량이든 정말 비효율적으로 만들어지긴 했는데,

지도를 입문하거나, 길찾기를 지도에 적용하고 싶은데 너무 막연하게 느껴진다면 도움은 될 것 같다.

[포스터 참고]

(2) Javascript를 이용한 Kakao 지도 Marker, Polyline, InfoWindow 이용해보기(1) - Marker : https://hyewon-s-dev.tistory.com/17

[Web/Map] Javascript를 이용한 Kakao 지도 Marker, Polyline, InfoWindow 이용해보기(1) - Marker

포스터는 다음과 같이 진행될 예정. [Kakao 지도 API를 이용한 길찾기 웹 만들기] (1) Kakao 지도 API 키 발급 및 HTML5 + Javascript 적용 (2) Javascript를 이용한 Kakao 지도 Marker, Polyline, InfoWindow 이용해보기 - Ma

hyewon-s-dev.tistory.com

(3) Javascript를 이용한 Kakao 지도 Marker, Polyline, InfoWindow 이용해보기(2) - InfoWindow : https://hyewon-s-dev.tistory.com/18

[Web/Map] Javascript를 이용한 Kakao 지도 Marker, Polyline, InfoWindow 이용해보기(2) - InfoWindow

hyewon-s-dev.tistory.com

(4) Kakao 지도 Python API 공공데이터 활용해 Javascript로 Polyline 그리기 : https://hyewon-s-dev.tistory.com/22

[Web/Map] Kakao 지도 Python API 공공데이터 활용해 Javascript로 Polyline 그리기

포스터는 다음과 같이 진행될 예정. [Kakao 지도 API를 이용한 길찾기 웹 만들기] (1) Kakao 지도 API 키 발급 및 HTML5 + Javascript 적용 (2) Kakao 지도 Javascript를 이용해 Marker 이용해보기 (3) Kakao 지도 Javascrip

hyewon-s-dev.tistory.com

+ 이상한 부분이나 틀린 부분, 피드백 대환영입니다.

내가 알기론 지도 api를 무료로 제공해주는 곳이 총 세 곳으로 알고있음

1. 네이버 지도 api (부분무료)

https://www.ncloud.com/product/applicationService/maps

2. 카카오 지도 api

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

3. 구글 지도 api (얘도 부분무료였나?)

https://developers.google.com/maps?hl=ko

여기서 나는 길찾기 웹을 만들기 위해서는 구글지도보단 네이버나 카카오가 나을 것 같다고 생각했고,

네이버 같은 경우, 지도 호출도 제한이 있어서(물론 어짜피 하루에 다 못쓸 량이긴 한데) 그냥 안전하게 카카오 지도 사용하고자 함.

만약, 자가용 길찾기를 사용하고 싶다면, 이에 대해 네이버 지도는 제공해주기 때문에 네이버 지도 api 사용하는 걸 추천함(단, 하루 호출량 이상 넘어갈 경우 돈나감. 설정 해두고 호출하기)

먼저, kakao map api에 들어가 web으로 눌러 접속하면, 사진에서 아래 왼쪽에 '키발급'이 보인다. 그거 클릭

로그인 해주고 접속해준 후 애플리케이션 추가하기를 눌러준다.

간단하게 정보 입력 후,

저장하기 누르면 아마 생성이 되었을 것이다.

앱 키와 기본 설정 사이에 플랫폼이 있는데, 아래 사진 참고해 플랫폼 제목을 눌러준다.

여기서 나는 web을 사용할 것이기 때문에 web 플랫폼을 등록해준다.

사용할 web 플랫폼 주소를 등록해주면 되는데, 테스트 주소가

Flask : http://127.0.0.1:5000

HTML Live Server : http://127.0.0.1:5500

라서 아래 사진과 같이 추가해줬다.

여기서 HTML Live Server는 vscode 에서 아래 확장자로 열 때 사용되는 테스트 주소이다. 아마 로컬로 주소만 입력해서 실행시키면 지도가 웹에 안보일 것임. 백엔드 처음부터 적용시키지 않을 것이라면, 아래 설치해서 오른쪽 마우스 눌러 Open with Live Server로 실행시키는 것을 추천

여기까지 하면 kakao map api 의 키는 발급.

다음은 HTML에 지도 띄우기.

먼저, 받은 app key 중에서 Javascript 키 사용.

<head>에 아래와 같은 코드를 추가해준다. ( {{javascript 키}} 지우고 발급받은 키 추가해주세요! )

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={{javascript 키}}&libraries=services,clusterer,drawing"></script>

+ 참고로 {{javascript 키}} 뒤에 붙은 services, clusterer,drawing은 각각 아래와 같은 기능을 가지고 있음

clusterer: 마커를 클러스터링 할 수 있는 클러스터러 라이브러리
services: 장소 검색 과 주소-좌표 변환 을 할 수 있는 services 라이브러리
drawing: 지도 위에 마커와 그래픽스 객체를 쉽게 그릴 수 있게 그리기 모드를 지원하는 drawing 라이브러리

<body> 태그 안에는 아래와 같이 작성해줌

<div id="map" style="width:500px;height:400px;"></div>
<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>

위치 바꾸고 싶다면 options 내의 centers의 value 값(위도, 경도)을 바꿔주면 된다.

level은 지도 확대 정도. 값이 작을수록 지도가 더 크게 확대된다.

[참고] 위도/경도 찾는 방법

나는 주로 구글지도 이용하는데, 예를 들어 아래와 같이 '완도대교'를 검색했을 때,

url을 확인해보면,

https://www.google.co.kr/maps/place/%EC%99%84%EB%8F%84%EB%8C%80%EA%B5%90/data=!3m1!4b1!4m6!3m5!1s0x3572e2d35d638e73:0x387727e059b76221!8m2!3d34.3940766!4d126.6467259!16s%2Fg%2F11b5v3q32v?hl=ko&entry=ttu

색칠한 부분이 각각 위도와 경도이다. 위치가 정확히 맞는지 확인하기 위해, 검색하는 곳에 '위도 경도' 를 입력해 검색하면, 아래 사진과 같이 완도대교와 같은 위치를 가리켜준다.

그 위치 가져와서 center 값에 넣어주면 됨

샘플 전체 코드

<!DOCTYPE html>
<html>
<head>
    <title>카카오 지도</title>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={{javascript 키}}&libraries=services,clusterer,drawing"></script>
</head>
<body>
    <div id="map" style="width:500px;height:400px;"></div>
    <script>
		var container = document.getElementById('map');
		var options = {
			center: new kakao.maps.LatLng(33.450701, 126.570667),
			level: 7
            
		};

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

틀린 부분 지적, 피드백 환영입니다 :)