카카오 맵 api 사용하여 지도 나타내기

반응형

카카오 맵 api 장점은 무료라는 것이다. 요번 시간에는 카카오 맵 api를 이용하여 간단하게 지도를 나타내는 것을 알려줄 것이다.

1. https://developers.kakao.com/  kakao developers 들어간다음 시작하기를 눌러준다.

2. 나만의 애플리케이션을 만들어준다.

위에서 적어준 것처럼 앱에 아이콘을 추가하고 싶으면 앱 아이콘을 눌러 추가를 해준다. 그리고 앱 이름은 자신이 원하는 앱 이름으로 해준다음 만약 자신이 사업자명이 없을 경우 아무 이름이나 적어도 된다.

 

3. 여러분들은 아래 키들중에서 JavaScript 키를 이용해줄 것이다.

4. 이제 카카오 맵 api를 활용하여 지도를 구현하기 마지막 과정일 것이다.

url: https://apis.map.kakao.com/ <-여기에 들어가준다.

우리는 웹을 구현해줄거니 Web을 클릭해준다. 그리고 거기에서 Wizard를 클릭을해준다.

 

5. Wizard를 클릭해줄경우 화면이 이렇게 뜰 것이다.

6. 나는 지도를 가로 1000, 세로 1000으로 맞춰준다음 level은 4로 맞춰주었다.

그러면 지도 사진 아래에 코드가 있을텐데 저 코드를 복사해주고 vs code 아무 html 파일에 붙여준다.

그리고 <script src>부분에 // <- 이 슬레쉬 2개의 왼쪽에는  https를 넣어주고 발급받은 APP KEY를 사용하세요 부분에는 저희가 아까전에 얻은 자바스크립트 KEY를 붙여넣어주면 됩니다.

 

실행결과: