![[Travel] 지도 API 에러 해결 사례](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-09-29T11%3A29%3A58.740Z-c27d763e-e4bb-4642-8d03-f38e5b5042a4&w=3840&q=75)
Contents
1. 카카오 지도 API 활용 중 프로젝트 도중 만난 허무한 에러 중 일부를 소개합니다.
1. 카카오 지도 API 활용 중
축제 상세 페이지에서 축제 위치(x, y)를 넣는 것이 목적으로, 카카오 지도 API 를 활용하였다.
미리 개인 key 를 발급받고,
자바스크립트에 라이브러리를 넣어준다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 자바스크립트 앱키"></script>축제는 메인 페이지, 상세 페이지 전부 ALL AJAX 인 비동기 방식으로 진행. (나는 특이하게도 이 방법을 택했다.)
응답 받은 데이터 전체가 responseBody.body 안에 존재하는 상태이다.
responseBody.body 안에 mapX, mapY 좌표가 들어있다.
원칙대로 라면 style 은 전부 .css 파일에 넣지만, 후반부에 급하게 수정하며 태그에 직접 넣었다. (미안합니다..)
태그 안의 style 이 css 에 설정한 style 보다 우선 순위.
적정 크기가 만들어져야, 문제 없이 지도가 들어간다고 한다.
이 때, 순서가 참 중요하다.
지도가 화면에 그려지고 나서 → 함수가 적용되게 순서를 잘 배치하여야 한다.
responseBody 를 담은 함수를 호출하고, 그 데이터가 담긴 DOM 을 보낸다.
- makeInfoBox(responseBody) 함수를 호출하여, 지도 배경이 먼저 그려지고,
- renderMap(responseBody) 지도 렌더링 함수를 호출하여, 지도를 완성한다.
호출 순서대로 makeInfoBox 함수 아래에 renderMap 함수를 넣었다.
콘솔에서 responseBody.body.mapX, responseBody.body.mapY 데이터가 잘 불러와지는지 확인은 필수.
데이터는 잘 불러와지는데, 대체 왜 지도만 노출이 되지 않는 것인가.
이것저것 시도해도 계속해서 지도 노출이 되지 않아, 많은 시간을 흘려보냈었는데(성윤님과 함께 고민하고 맘고생도 함께했다.)
혜지님이 등장해서 좌항과 우항의 값을 바꿔보는 것이 어때요? 하면서 손쉽게 해결.
좌표가 좌항에 mapY 값이 들어가고, 우항에 mapX 값이 들어가야 노출이 되는 것이었다.
이리 허무할 수가
지도의 중심 좌표가 Y 값이 좌항, X 값이 우항. 통념이 깨지는 순간이었다.
엉망진창의 코드 속에서 팀원들의 도움으로, 에러를 해결한 사례이다.
P.S. 언제나 그렇듯 물심양면으로 도와준 우리 팀원들에게 감사 인사를 표한다.
Share article