카카오맵 API 연동 방법

프로젝트/API활용

카카오맵 API 연동 방법

thinktank911 2025. 9. 24. 17:42

카카오맵 연동

API 키를 발급받아 기본 지도를 HTML에 띄우기
- 카카오맵 API 키 발급과정 가이드를 숙지한다.
  - 링크 : https://apis.map.kakao.com/web/guide/
  - https://developers.kakao.com/ 접속 > 로그인/회원가입 > 앱 > 앱 생성
    - 공부용이니 앱 이름에 프로젝트명, 회사명에 내 이름을 적었다.
      - [앱 선택] > 앱 > 일반 > 플랫폼 > 웹 플랫폼 등록
        
        사용할 도메인을 등록한다.
      - [앱 선택] > 앱 > 일반 > 앱 키> JavaScript 키
        
        JavaScript 키를 app key로 사용한다.
1. index.html 만들어 화면에 지도를 띄우는 코드를 작성한다.
  - html 형태를 만든다.
  - 지도에 담을 영역 만들기
  - <div id="map" style="width:500px;height:400px;"></div>
  - 실제 지도를 그리는 Javascript API 불러오기
    - // 이라는 상대 프로토콜을 사용하면, 사용자의 http, https 환경에 따라 자동으로 해당 프로토콜을 따라가게 됩니다.
    - API를 로딩하는 스크립트 태그는 HTML파일안의 head, body 등 어떠한 위치에 넣어도 상관없습니다.
    - 하지만, 반드시 실행 코드보다 먼저 선언되어야 합니다.
  - <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
  - 지도를 띄우는 코드 작성
    - Map 객체의 두 번째 파라메터로 넣는options의 속성 중, center는 지도를 생성하는데 반드시 필요합니다.
    - center에 할당할 값은 LatLng클래스를 사용하여 생성합니다. 흔히 위경도 좌표라고 부르는
    - WGS84 좌표계의 좌표값을 넣어서 만드는데요, 생성인자는 위도(latitude), 경도(longitude) 순으로 넣어주세요.

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 
var options = { //지도를 생성할 때 필요한 기본 옵션 
	center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. 
	level: 3 //지도의 레벨(확대, 축소 정도) 
}; 
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

사이트 도메인에 등록했던 http://localhost:3001 을 띄운다.
- 터미널에서 node app.js 로 실행 후 사이트 주소 입력
- 문제발생1 : 사이트 주소를 입력했을 때 아무것도 뜨지 않았다. index.html을 띄우는 명령어를 작성해줘야 한다.
  - app.js에 정적파일을 읽어오는 미들웨어를 셋팅한다.
  - / 요청 → __dirname 폴더 안에 /에 해당하는 파일이 있는지 확인 → index.html 파일이 있으면 반환.
  - 즉, Express는 정적 폴더 안에서 “디렉터리 요청 시 index.html을 기본 파일로 찾는다”라는 규칙을 자동으로 적용
```
// app.js
// 미들웨어 셋팅
// express.static 미들웨어를 사용하여 'index.html'과 같은 정적 파일을 서비스합니다.
// __dirname은 현재 실행 중인 스크립트(app.js)가 있는 디렉터리를 가리킵니다.
app.use(express.static(__dirname));
```
- 문제발생2 : Uncaught ReferenceError: kakao is not defined 에러 발생
  - 원인1 : kakao 객체를 사용하는 스크립트가 카카오맵 API 스크립트 로딩이 완료되기 전에 실행되어 발생하는 문제로 판단
  - 방안1 : kakao.maps.load() 함수를 사용하여 API 로딩이 완료된 후 실행될 코드를 예약
  - ⇒ 여전히 같은 문제 발생
  - 원인2 : 개발자도구 > 네트워크 에 403 에러가 같이 뜨고 있었기에 사이트 도메인 등록이 제대로 되지 않은건지 확인
  - 방안2 : 재등록하였고, 등록 시 5분 정도 시간이 걸린다고 해서 기다려보았다.
  - ⇒ 여전히 같은 문제 발생
  - 해결 : 이 때, 카카오 디벨로퍼 사이트에 알림창이 뜨길래 보니 카카오맵 API를 활성화해야 한다고 한다.
  - <카카오맵 활성화 필요>
    - 앱 > 제품설정 > 카카오맵 > 사용 설정 [ON]