카카오 맵 API 이용하여 지도 불러오는 법 #78

sangwonsheep · 2024-08-11T11:42:20Z

sangwonsheep
Aug 11, 2024
Maintainer

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

위 사이트에 접속해서 해당 가이드를 따른다.
사이트 도메인 등록 시 반드시 포트 번호까지 작성한다.
html 파일에 넣고 싶은 곳에 아래 코드를 작성한다.

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

여기에서 javascript key를 복사해서 위에 sdk.js?appkey= 에 넣어주시면 됩니다.

제가 겪었던 오류 상황 및 해결 방안

사이트 도메인 등록 시에 포트 번호를 작성하지 않음. (http://localhost)
위 코드 그대로 넣고 크롬 개발자 모드에 진입하였더니 ReferenceError: kakao is not defined 발생
이를 해결하고자 2번에 작성된 링크에서 알려준 코드 작성

const script = document.createElement("script");
script.src = "http://dapi.kakao.com/v2/maps/sdk.js?appkey= JAVASCRIPT_APP_KEY&autoload=false&libraries=clusterer,services&";
document.head.appendChild(script);
script.onload = () => {
    kakao.maps.load(() => {
        const node = document.getElementById('map'); // 지도를 표시할 div
        const center = new kakao.maps.LatLng(37.50802, 127.062835);
        const options = {
            center,
            level: 3
        };
        const map = new kakao.maps.Map(node, options);
    });
};

동적으로 처리하면 해결 될 것이라 생각했지만, kakao is not defined만 사라지고, 화면은 여전히 그려지지 않음.

다음 해결 방법 : 크롬 개발자 모드에 들어가서 network 클릭, sdk.js가 401 오류를 발생시키는 것을 확인.

위 사진에 적힌 app key는 제 key 아닙니다...!

https://devtalk.kakao.com/t/api-401/99524
4. 위 링크에서 포트 번호 설정하였는지 확인해보라는 답변을 보고, 사이트 도메인에 포트 번호 추가.

그 후...... 문제 해결!

주소 검색 시 지도까지 함께 출력

https://postcode.map.daum.net/guide

위 링크에서 제공해주는 코드 그대로 가져다 쓰면 아래와 같은 화면 출력이 가능합니다.

json 데이터 받는 방법

https://developers.kakao.com/docs/latest/ko/local/dev-guide#address-coord
https://minutemaid.tistory.com/174

postman 혹은 api 호출할 수 있는 툴을 이용한다.
카카오 공식 문서에서 제시해주는 방법을 따라한다.
query parameter는 필수로 작성해야 하는 것들을 작성해준다.
header에 본인이 발급받은 REST API 키를 반드시 입력해주어야 한다.

I-migi · 2024-08-11T12:18:21Z

I-migi
Aug 11, 2024
Maintainer

저도 참고해서 시도해보겠습니다!!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

카카오 맵 API 이용하여 지도 불러오는 법 #78

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

카카오 맵 API 이용하여 지도 불러오는 법 #78

Uh oh!

Uh oh!

sangwonsheep Aug 11, 2024 Maintainer

제가 겪었던 오류 상황 및 해결 방안

그 후...... 문제 해결!

주소 검색 시 지도까지 함께 출력

json 데이터 받는 방법

Replies: 1 comment

Uh oh!

I-migi Aug 11, 2024 Maintainer

sangwonsheep
Aug 11, 2024
Maintainer

I-migi
Aug 11, 2024
Maintainer