카카오맵 API 사용 중 Cannot read properties of undefined (reading 'maps') 오류 해결!

 

카카오맵 쓰려다가 이거 때문에 정말 애를 먹었다. 검색도 아래처럼 엄청 많이 하고 ㅎㅎ..

 

 

 

 

해결하기 위해 여러가지를 시도해보았다

 

첫번째. 카카오 문서 그대로 따라하기

 

처음에 카카오맵 연결할때는 claude(생성형 AI)에게 짜달라고 했는데 너무 미사여구를 많이 붙인 코드를 줘서 공식문서를 보고 일단 기본적인 거만 따라했다.(처음에는 바로 따라하다가 const로 변수 만들고 이러길래 바로 공식문서로 이동함)

 

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

 

 

 

 

 

두번째. index.html에 api키 넣어 코드 짜기

 

위에서 말했듯 claude는 변수로 하길래 이게 맞나? 했는데 아니었구요.. 아래 벨로그보면서 따라했더니 됐습니다 + 'kakao' is not undefined 해결도 함

 

https://velog.io/@tpgus758/React%EC%97%90%EC%84%9C-Kakao-map-API-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

React에서 Kakao map API 사용하기

 

 

 

 

 

세번째. (정답)카카오 API 활성화 설정

 

이게 정답이었다. 스크립트 코드에 커서를 두고 cmd+클릭을 했더니

 

이게 나와서 구글링을 해보니 같은 문제를 겪은 사람들이 많았고 결국은 카카오 맵 api를 활성화해야하는 것이었다. 

([내 애플리케이션] > [제품 설정] > [카카오맵]에서 카카오맵 API 활성화 여부 설정, 왼쪽 사이드바를 계속 내리면 나온다)

 

 

https://devtalk.kakao.com/t/api/140875

[공지] 카카오맵 API 활성화 설정, 추가 쿼터 제공 기능 적용 안내

 

 

 

 

깔끔하게 나오죠잉?