TIL 23.07.18 카카오맵 API 'Geocoder' 에러

문제점

 

기존에 경도, 위도를 하나하나 입력하여 정보를 받아온 하드코딩 ..에서 벗어나서 단순히 주소만 있으면, 카카오맵에서 객체의 주소를 받아올 수 있다고 하길래, 외부 API인 geocoder를 사용하기로 하였다.  자동으로 위도, 경도로 바꿔주는 API로 경도-위도 검색 사이트를 이용하지 않고 매우 효율적으로 관리할 수 있음. 그러나 이를 사용하는데 에러가 발생하였다.

 

const geocoder = new window.kakao.maps.services.Geocoder();

 

Cannot read property 'Geocoder' of undefined 오류가 나면서 읽어오지 못했음.

 

시도해본 것 

 

서비스 종료했나 싶어 검색했는데 그것도 아니었고, Geocorder() -> geocorder() 로 변경했는데 그것도 아니었다.

 

해결방안

 

이는 간단하게 해결할 수 있는데, 카카오 지도 Web API 가이드를 확인하면

 

라이브러리는 추가로 불러서 사용해야 합니다. 아래와 같이 파라메터에 추가하여 로드합니다.

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=LIBRARY"></script>

LIBRARY 토큰 부분에 사용하고자하는 라이브러리 이름을 적으면 해당 라이브러리를 불러올 수 있습니다.

 

라이브러리를 불러올때는, 위처럼 사용하고자 하는 라이브러리 이름을 적어 index.html에 작성해주어야 한다

고로 나는 geocoder services를 사용하기 때문에 다음과 같이 작성해주면 됨.

 

<!-- services 라이브러리 불러오기 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=services"></script>

 

알게된 것

API 를 사용할 때는 내 마음대로 사용할 것이 아니라 서비스 제공업체의 사용방법을 주의깊게 읽어봐야겠다. 비교적 해결하기 쉬운 문제여서 다행이었다..