컴퓨터/웹 : JS

[WEB] 카카오지도 API 사용법/웹에 지도 넣기

도도새 도 2023. 3. 4. 10:19

카카오맵 API

이번 프로젝트를 진행하면서 카카오 지도 API를 사용하였다. 클라이언트는 React와 일반 html(정확히는 ejs엔진)을 이용하는데, React와 일반 html에서 카카오 지도 API를 사용하는 방법이 약간 다르다. 물론 따지자면 같지만 작성해야 할 코드가 다르다는 것이다.

웹에 지도를 넣는 것은 꽤나 자주 사용되는 방식인 것 같다. 그러므로 국내에서 많이 사용되는 지도API사용 정리를 한 번 하는 것이 스스로에게 도움이 될 거라 판단하였다.

카카오 지도를 사용해보니 무척 간단하고 편했기에, 다음에도 프로젝트를 할 일이 있다면 카카오 지도를 활용할 계회이 있다. 이에따라 카카오지도 API사용방법을 간략하게 정리한다.

카카오 지도

1 . 지도 사이트 방문

우선 웹에 카카오지도를 삽입하기 위해서 아래 사이트로 들어간다.

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

이곳에 들어가 로그인을 하고 Web을 눌러준다. 그 후

2. 시작하기

시작하기를 누른 후, 카카오 개발자사이트에 들어가 API키를 발급받는다. 페이지에서 안내하는 카카오 개발자 사이트 주소를 클릭한다.

3. 애플리케이션 추가하기/키 발급

여기서 애플리케이션 추가하기 버튼을 누른다.

앱 이름과 사업자명을 아무렇게나 짓고 저장한다. 그 후 생성된 항목을 누르면,

각종 키들이 보인다. (남들에게 안 보이도록 하자)

이 중 카카오 지도에 쓸 것은 JavaScript키이다. 복사해놓자.

4. 코드 작성

다시 아래의 페이지로 돌아와

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

시작하기를 확인한다.

위의 코드에서 발급받은 APP KEY를 넣으시면 됩니다. 부분에 JavaScript키를 붙여넣는다. “”나 ‘’ 같은 것을 쓸 필요 없이 그저 붙여넣으면 된다.

그 후 가이드가 시키는 대로 따라하면 지도가 보이게된다. 즉 아래 코드를 붙여넣는다.

<!DOCTYPE html>

<html >

<head >

<title >Kakao 지도 시작하기 </title >

</head >

<body >

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 >

options의 level은 확대 정도 center은 중심점이다. center의 LatLng입력값은 위도 경도를 받는다.

마커나 표시 등 다양한 정보는 Doc을 살피면 생각보다 쉽게 지도를 만질 수 있다!

React에서 카카오 지도 API 사용

내가 꼭 기억하려고 한 부분이 바로 이 파트이다. 리액트에서 카카오 지도 사용하기. 가상 Dom이라는 해괴망측한 방식 때문에 script를 채 불러오기도 전에 Map을 사용하고, Map이 없다는 오류를 뱉어버린다.

리액트 카카오지도 API 오류

kakaoMap.js:15 Uncaught TypeError: window.kakao.maps.LatLng is not a constructor

at kakaoMap.js:15:1

at e (sdk.js?appkey=36ae5291fff272f636c29f53ee0e5ad5&libraries=services,clusterer:2:99)

at o.load (sdk.js?appkey=36ae5291fff272f636c29f53ee0e5ad5&libraries=services,clusterer:5:9)

at HTMLScriptElement.<anonymous> (kakaoMap.js:11:1)

다행히 카카오 지도 Doc을 보면 해결책을 제시한다.

1. 카카오지도 스크립트 동적 로드

즉 scipt를 동적으로 생성하여 append한 경우 에러가 발생하며 이에 대한 해결책이 있다는 것이다. 아래 코드를 보자.

(React에서는 동적으로 스크립트 태그를 생성하는 것이 권장된다고 들었다.)

kakao.maps.load(function() {

// v3가 모두 로드된 후, 이 콜백 함수가 실행됩니다.

var map = new kakao.maps.Map(node, options);

});

</script>

변경 사항은 src의 끝에 autoload=false라고 적은 부분, 그리고 kakao.maps.load( ()=>{})를 사용한 부분이다.

저 함수를 사용할 경우 카카오 맵 관련 파일들이 모두 로드가 된 이후 해당 함수 내용이 실행되기에 접근 할 수 없다거나 null이라거나 하는 에러를 해결할 수 있게 된다.

다만 저 코드를 React에서 그대로 쓰면 에러가 발생한다. 우리는 Window객체를 통해 kakao 객체에 접근하여 사용 할 수 있다.

2. window객체 사용

아래는 내가 사용한 코드이다.(내가 props를 probs라고 사용하는 에러 아닌 에러가 있다.)

import React , { useEffect , useState } from 'react'

export function KakaoMap (probs ) {

useEffect (()=>{

const script = document .createElement ('script');

script .async = true ;

script .src = '//dapi.kakao.com/v2/maps/sdk.js?appkey=내키입니다요&libraries=services,clusterer&autoload=false';

document .head .appendChild (script );

script .addEventListener ("load", ()=>{

if (probs .latitude != null &&probs .longitude != null )

window .kakao .maps .load (()=>{

const container = document .getElementById ('map');

const options = {

center :new window .kakao .maps .LatLng (probs .latitude , probs .longitude ),

level :3 ,

draggable :true

};

window .kakao .maps .Map (container , options );

});

}, [probs .latitude , probs .longitude ])

return (

</div >

)

}

보다시피 script element를 동적으로 생성하여 head 내부로 할당하고 있다. 그 script의 src 내용으로 autoload=false가 포함된다. 도한 script.async 속성을 true로 해두었다.

이후 Docs 가 안내하는 대로 kakao.load를 사용하였다.

또한 나는 입력하는 위도 경도 정보가 null일 경우는 load를 하지 않는 처리를 하여, load하였을 경우 위도 경도 값이 올바르게 입력되어 있게끔 유도하였다

이러한 방식으로 React에서도 카카오지도API를 사용할 수 있게 된다.

저작자표시 비영리 변경금지