kakao map 넣기

firebase로 web hosting을 알아보고, 이제 또 map을 알아보게 된 것은 아래 영상 때문입니다.

시각장애인을 위한 음향신호기에 대한 영상인데, 이걸 보고 나니 전국의 음향신호기를 전수검사 했으면 싶은 마음이 생기네요. 그래서, cloud sourcing을 할 수 있는 웹앱을 만들어 보면 어떨까해서 대충 지도 위에 뭔가 표시 할 수 있는 방법을 알아보게 되었습니다.

 

www.youtube.com/watch?v=2YtqorTKD9c

 

Code for Korea에서 진행 중인 프로젝트 중에 안심이 지도라는게 있는데,

ansim.me/

안심이

코로나 때문에 만들어진 지도인데, 아직은 그 프로젝트에 기여 할 만한 웹 배경 지식이 부족해서 우선 따로 한번 만들어 보려고 합니다.

 

 또 한편, 이렇게 필요한 시스템을 그 때 그 때 개발하는 것이 그다지 좋은 것도 아니라는 생각도 드네요. 확인 해 보니, 정부에서 만든 유사한 기능의 앱이 3가지가 이미 있어요. 정부에서 만든 앱을 대신해서 만들 것이 아니라, 그 앱들이 제대로 작동하도록 열심히 쓰면서 적극적으로 신고 해 주는게 더 바람직한 모습인 것 같아요. 각자의 역할을 하는거니까. 그래서, 개발은 개발대로 하면서 길을 가다 음향신호기가 보이면 테스트 해 보고, 잘 안되면 신고 좀 해보려구요.

 

본론으로 돌아와서~~~

 

웹에 지도를 넣는 것은 매우 간단합니다.

Kakao map을 한번 넣어보겠습니다.

 

https://apis.map.kakao.com/

kakao map API site입니다. 한번 해 보니 예~~~~~전에 한번 써봤던 기억이 나네요.ㅋㅋ

웹으로 만들 것이니 웹으로~

kakao 개발자 사이트에서 프로젝트 등록하고 API key를 발급받습니다. firebase와 거의 비슷합니다.

웹앱이니 javascript key를 써야되구요. 아래 키를 감췄지만..뭐 별로 감출 이유도 없고, 소스에서 감추는 방법도 모르니까 별로 의미 없겠네요.ㅋ

플랫폼으로 웹을 등록하면, 사용 할 도메인 주소를 등록하게 되는데, 이 도메인에서만 사용 할 수 있어요. 

로컬과 deploy URL 두 가지를 어떻게 해야되나 좀 걱정했었는데 10개가 등록 가능하네요.

http와 https 구분 해야 되는 것 같고, 언제든지 수정 가능하니 부담 없이 쓰셔요.

index.html 을 kakao map의 샘플 코드로 바꿔서 확인 해 보겠습니다.

기존 소스 다 지우고 샘플 코드를 넣고, javascript용 key를 적용합니다.

로컬 서비를 구동하고 확인 해 봅니다.

생각보다 쉽게 잘 되네요. 이제 deploy하고~

짜짠~ 잘 되네요.

이제 firebase의 구글인증과 실시간데이터베이스를 쓰면 사용자들이 지도 상의 정도를 추가/삭제/수정을 할 수 있는 페이지를 만들 수 있지 않을까 싶네요. 

 

 사람들에게 도움이 되는 시스템이 될지는 알 수가 없지만, 그 과정에서 저도 배우는 것이 많고, 이웃들에 대한 생각도 많이 해 보는 시간을 갖는 그 자체가 큰 의미가 있을 것 같습니다.