카카오 API로 코로나맵 만들기
Вставка
- Опубліковано 28 лют 2020
- #카카오API #코로나맵
최근 코로나 바이러스가 유행하면서 확진자 관련 서비스들이 많이 생겨나고 있습니다.
이런 서비스들은 코딩을 잘 못하더라도 네이버나 카카오에서 제공하는 지도 API를 사용하면 누구나 어렵지 않게 구현할 수 있는데요.
이번 영상에서는 카카오에서 제공하는 API를 사용하여 손쉽게 코로나맵과 유사한 웹사이트를 제작하고 인터넷에 게시하는 방법까지 강의를 진행하겠습니다.
아케이님 항상 초급자가 보아도 이해가 쉽게 설명해주셔서 감사합니다 혼자 공부중이라 오늘과같은 map api넣은게 정말 궁금하고 필요했습니다 시국인지라 건강 잘 챙기시고 앞으로도 올려주시는 영상 열심히 보고 잘 따라갈 수 있으면 좋겠습니다 🙂바쁜시간 투자하여 제작해주셔서 진심으로 고맙습니다
댓글 감사합니다. 앞으로도 더 좋은 영상 많이 만들어보겠습니다.
영상 지루하지않고 너무 재밌게 잘 만드시네요!! 잘 봤습니다 다른것도 봐야겠어용
최고 잘 만들었네요. 다른 이상한 개발 안내가 많은데, 정말 잘 했습니다.
목소리가 너무 편안해요 ~좋은영상감사해요!
쉽게 따라할 수 있게 알려주셔서 감사합니다. 정말 유익했습니다:)
안드로이드 스튜디오에서 json이용후 리사이클뷰어를 통해 구현하려고 했는데 이 자료를 토대로 해도될거같네요 감사합니다. :)
오...지도관련 프로젝트를 진행해야되는데, 어떤 방식인지 이해가 되네요! 감사합니다!
영상 많은 도움이 됐습니다.
최근에는 바쁘신지 영상이 업로드되지않아서 슬프네여 ㅠ 화이팅입니다
감사합니다 행님 사랑합니다 행님 덕분에 공부하네요 행님 ㅎㅎ
잘 보고 갑니다~
너무 잼있게 잘봤습니다 따라하니 금방하네요 ㅎㅎ 혹시 하단에 다른분이 댓글로 숙소어플처럼 정보나 이런거 넣고싶으면 어떻게 해야하는지 문의주셨는데 혹시 아래 댓글처럼 인포윈도에 정보,이미지 등 넣는방법에 대한 강의 계획은 있으신가요?
잘보고 가여~
클라이언트 서버 개념을 이해하면 앞부분은 이해가 쉽겠군용
설명 잘해주시네요 감사합니다. 카카오톡 회원가입도 해주시면 좋을 거 같아요~
개발 지식이 폭발적으로 확장되는 느낌
유익한 강의 너무 감사합니다.
혹시 마커를 클릭했을때 카카오맵에 CCTV 버튼 누르면 CCTV 영상이 나오게끔하는 기능 영상이나 설명 가능하실까요?ㅠㅠ 굳이 영상이 아니더라도, 마커를 클릭했을때 특정 글자가 표시되는 창 화면 표시나 이런 기능이요.. 도와주세요
오오 너무 좋아요 이거보고 저도 코로나 맵 만들거에요!! 감사합니다
♥
아케이님 영상 잘봤습니다.
비슷하게 만들어보려고 하는것에 도움이 많이 되었습니다
그런데 만들다보니 클러스트러를 클릭했을때 지도의 확대보다는
클러스트러에 포함된 마커들의 좌표를 리스트를 화면에 나타내고 싶은데..
며칠째 진도가 전혀 안나가네요
혹시 이부분 강의 한번 해주시거나 설명 한번 부탁드려도 될까요?
바쁘시면 안하셔도 됩니다
다시한번 감사드리고
따뜻하게 저녁 잘 보내세요
유익하고 훌륭한 영상 만들어주셔서 감사합니다! 선생님 덕분에 카카오개발자 서비스 이용하는 방법도 배우게 되어서 매우 기쁩니다. 프로젝트를 수행하면서 한 가지 궁금했던 점은 (11:43부터) 지도에 표시해주기 위해, 노가다로 일일이 다 코드를 작성해야하나 하는 점인데요. 현업에서는 이러한 문제를 해결하기 위해 어떻게 하나요?? (제 생각에는 일일이 노가다로 다 작성하지 않을 것 같습니다만..) 감사합니다.
일반적인 현업 서비스에서는 데이터를 일일이 수기로 입력하지 않고, 서버에서 자동으로 데이터를 받아와 화면에 렌더링 해주는 방식이 주로 사용됩니다.
다만 해당 영상에서는 별도의 서버 구축 없이 웹페이지 하나로 데이터 처리를 하여 일일이 입력해주었습니다.
또한 코로나 확진자 정보 등은 데이터를 공공기관 발표를 기준으로 하기 때문에 어쩔 수 없이 수기로 입력해야만 합니다.
안녕하세요 영상을 따라 해보려고 하는데요 vs code가 아닌 visual studio로 만들려고 하는데 템플릿을 빈프로젝트 windows용 c++로 하면 되나요?? 아니면 windows 대스크톱 애플이케이션으로 생성하면 되나요??
정말 제가 찾던 정보인데 감사합니다 ㅠㅠ 아직 댓글을 보실지는 모르겠지만 엑셀데이터를 추출해서 자동으로 마커를 찍는 방법을 알려주실수 없을까요..ㅠㅠ
그럼 확진자의 동선과 현재 자기위치가 겹첬을때 경고나, 자기 주변에 확진자 동선이 얼마나 있는지 확인하려는 앱을 만들려면 어떻게 해야할까요??
'키워드로 장소 검색하기' 기능을 활용하고 싶은데 잘 안되네요. 이와 관련해서 추후 영상으로 알려주실수 있나요?
유익한 가르침 감사합니다. 조용한 곳에서 집중해서 다시 천천히 봐야겠습니다.
5:05 에서 하는데 마커가 안떠요..분명 자바스크립트 키 올바르게 붙여넣었는데 뭐가문제일까요?
안녕하세요. 강의너무 잘봤습니다
제가 동일하게 카카오맵을 화면에 띄우고
고캠핑 전국 캠핑장 표준데이터 오픈api를 발급받아 표기하고싶은데
해당 기능에 대한 강좌가 있을까요?
좋은 영상 감사합니다.
질문이있습니다 해당 마커지역에 예를들어 추가설명을 하고싶다면. 서울역인데 우클릭을 통해서 서울역에 대해서 꼭 기입하고싶은 내용을 넣는것도 추후 시간되실때 알려주시면 좋을것같습니다!
자세한 사용법은 카카오맵 API 문서를 확인하시면 좀 더 다양한 사용 방법을 배우실 수 있습니다.
영상보고 만든후에 추가할내용들에 대해서 하고있는데 막혔는데 혹시 올려주신 영상에서의 완성본 +
apis.map.kakao.com/web/sample/removableCustomOverlay/ 해당 커스텀오버레이를 넣는 방법에 대해서 알려주실수있으실가요?
어떤 코드 추가를해야 링크페이지처럼 될지 공부중인데 잘안되서요 ㅠ
혹시 카카오맵 전체화면 스타일링 설정시 100vh는 되고 100%는 안되는지 혹시 아시나요?
카카오맵 api에서 자꾸 kakao is not defined라고 나오는데 어떻게 해결해야 할 지 혹시 아시나요? 자바스크립트 키 복사붙여넣기도 잘 했는데..
카카오 개발자 위자드에서 마커를 누르고 맵을 생성할려고 하는데 마커가 안뜹니다 ㅠㅠ 마커까지 있는 지도 소스좀 부탁드려도 될까요??
사용 가능한 디버거가 없으므로 'variables'을(를) 보낼 수 없습니다.
이건 어떻게 해결하는지 알려주세요ㅠㅠ
이거땜에 막혔어요
선생님 카카오 지도 API 예제 다른것도 풀어 주시면 안돼나요.ㅠ 다른 분들 하는건 너무 졸려요.ㅠ
안녕하세요덕분에 도움이 되었습니다ㅎㅎ 혹시 사이트 이름이 '다음지도 API' 로 되어 있는걸 고치는 방법은 어떻게 하는지 질문해도 될까요..?!
이케아님 혹시 지도상에 선이나 도형 텍스트를 삽입할수도 있나요?
별도의 GUI가 있어야할까요?
가능합니다. 공식 홈페이지 문서를 확인해보시기 바랍니다.
웹 애플리케이션 하는 데 많은 도움이 되서 감사합니다. 궁금한것은 모바일 지도 상에서 내위치를 확인하고 주변에 상황을 알고 싶은데요.. 일반 pc상에서는 나오지만 모바일상에서는 내위치가 나오지 않네요.. 방법이 있으면 부탁드립니다.
모바일에서는 위치 정보 권한 허용을 해주셔야합니다.
아 ㅋㅋ꿀잼
코드를 작성하실때 안된다는 분들은 선생님의 코드를 보고 고쳐보세요. 최소한에 혼자 해결하려고 해봐야 코딩은 늘어요
사용 가능한 디버거가 없으므로 'variables'을(를) 보낼 수 없습니다.
이건 어떻게 해결하죠....?
카카오네비안내를 웹버전으로 가능하게 하는 영상제작 부탁드려요ㅜ
Html이 안열어지고 오른쪽 마우스누르고 열기해서 들어가도 빈창만 열리는데 이건 어떻게 해결해야할까요...?
가족들의 위치를 실시간으로 핸드폰의 GPS를 이용해서 웹에 표시하려는 코딩을 하려고 합니다. 위의 영상을 보고 열심히 배우고 있는데 영상의 카카오맵을 이용 아이들의 위치정보를 이용해서 웹상에 표시하려고 한다면 어떻게 코딩을 하면되는지 궁금합니다.
실시간 gps 추적 같은 경우는 추적을 위한 어플리케이션이 별도로 필요하기 때문에 가벼운 강의 영상에서 다루기는 조금 심화된 내용입니다.
필요한 기능들을 간단히 설명드리자면,
1. 앱에서 지속적으로 (예: 매 5분 마다) 현재 위치 정보를 서버로 보낸다.
2. 서버에서 정보를 받을 때 마다 받은 위치의 좌표 정보를 웹에서 업데이트 한다. (소켓 통신)
이 경우 별도의 서버가 필요하므로 AWS나 GCP 등의 클라우드 서버를 구축하시는 것을 추천해드립니다. 다만, 앱 제작, 서버 제작, 웹 개발 능력이 동시에 필요하기 때문에 초보자 분께는 추천드리지 않습니다.
@@arkaycoding 감사합니다. 열심히 배우고 공부해야 하겠습니다.
너무 좋은 강의 입니다. 학교에서 학생들과 실습하려고 하는데 혹시 소스코드 받을 수 있을까요? ㅠㅠ 제가 컴맹이라 영상 열심히 보면서 학생들에게 가르치겠습니다
uououo7822@gmail.com으로 소스코드 받을수 있을까요? ㅠㅠ
지도를 회전시킬수도있나요?
이 동영상을 보고 처음으로 비주얼 스튜디오를 사용하는데 워크로드는 뭘 추가해서 설치해야 되는건가요?
Visual studio code를 사용하시면 되고, 워크스페이스를 따로 할 필요 없이 폴더를 생성하고 해당 폴더를 오픈해서 쓰시면 됩니다.
@@arkaycoding 감사합니다!!!!!
혹시 산의 정보를 위치를 마커로 나타내고싶은데 일일이 산의 위도경도를 적기에는 너무많아서 다른방법이 없을까요? 공공데이터에는 xml파일이 있습니다!
해당 xml 파일의 정보를 읽어와서 for 문으로 생성해주면 될 것 같네요
@@arkaycoding 흑흑 조금만 더 상세하게 알려주실수있을까요? 제가 코린이라서요..url2 ="여기에 주소넣고"
for문으로 어떻게 돌리면될까요?
좌표가 X, Y로 되어있는 좌표를 구했을 경우 알려주신것처럼 여러개를 한번에 넣을수 있는 방법은 없을까요????
마커가 표시되지 않는데 이유가 무엇인가요??
아케이님 문제가 생겼어요 ㅠㅠ 똑같이 코딩 넣었는데 마커가 보이지가 않아요 도와주실 수 있나요?
어느 부분에서 막히셨나요?
주소를 자동으로 가져와서 마커가 생성 될 수 있게는 못하나요?
인포윈도우와 마커를 자동으로 생성 하고 싶은데.. 좌표뿐이 못쓰나요?
서버 개발을 별도로 하신다면 자동화가 가능합니다! DB에 관련 정보를 저장해놓고 꺼내와서 사용하는 방법도 있고요. 다만 이 부분은 관련 프로그래밍 지식이 좀 더 필요합니다.
@@arkaycoding 안녕하세요 개발자로 입사한 4일차신입입니다ㅠ db연결해서 데이터가져오는것까지했는데 카페24호스팅 웹 페이지에 db데이터 기반으로 마커를 표시하려고하는데 관련 소스나 예제가 따로있을까요?로컬에서는 데이터를 불러오는데 적용하고싶은 웹페이지에 불러오는법을 잘 모르겠어서..ㅜㅜ
안녕하세요,
이제 다 구현하고 데이터만 입력하면 되네요.
coronamap.site/live와 같은 사이트에 데이터가 저장되어 있나요? 찾아봤는데 찾을수가 없네요.
감사합니다.
7:28
이제는 전부 다되는데 마지막 한가지가 남았습니다.
마우스커서를 마커에 갖다되면 인포윈도우가 떠야하는데
저는 마우스커서를 갖다되지않아도 인포윈도우가 떠있습니다.
그런데 마커를 클릭해야지만 인포윈도우가 사라지면서 마우스커서를 갖다되면 인포윈도우가 뜹니다.
실행시키자마자 바로 마우스커서를 누르지않아도 될려면 어떻게해야하나요?
혹시 마커 뜨는거까지 하셨나요..? 마커가 안뜬다는 분들이 많아서 어떻게 해야할지 모르겠네요ㅠㅠ 저도 마커가 안떠서요
@@minglet054 저 영상대로 처음했을때는 되었는데 다시하니깐 안되더라구요
그래서 그 샘플코드에 마커추가하기 있는데
그 소스긁어오시면 됩니다!
아케이님 ㅠㅠㅠㅠ 전 현 고3 수험생으로 동아리에서 아케이님 동영상을 참고하여 맵을 제작하려는 취지에서 열심히 노력 중입니다. 제가 이 동영상을 보면서 거의 2일째 계속 시도하는데 오류가 뜨더라고요 마커가 표시가 안되는데 혹시 html 파일을 보내주실수 있을까요?? 꼭 좀 부탁드릴께요 정말 급해요ㅕㅠㅠㅠㅠㅠㅠ
benny3214@naver.com 꼭 좀 부탁드리겠습니다 ㅠㅠ
저도요
아래와 같이 만들었는데 마커표시가 안되네요 ㅠㅠ 3개가 되면 좋은데 혹시 어떻게 고칠까요? ㅠㅠ
다음 지도 API
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.553186, 126.971949), // 지도의 중심좌표
level: 8, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
var 데이터 = [
[37.513752, 126.939254, '노량진역'],
[37.529736, 126.964708, '용산역'],
[37.522229, 126.973770, '이촌역'],
];
for (var i=0; i < 데이터, length; i++){
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(데이터[i][0], 데이터[i][1])
});
marker.setMap(map);
// 마커가 지도 위에 표시되도록 설정합니다
var iwPosition = new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]); //인포윈도우 표시 위치입니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
position : iwPosition,
content: 데이터[i][2]
});
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker);
}
5개월이 지났지만.. 제가 확인해본 결과 데이터.length 인데 데이터,length로 하신것 같아요
카카오API배워가네용~
그런데 똑같이 했는데도 전 마커랑 다 안보이네요;;
뭐가 문제일까요??
제작자:주상현 코로나지도
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.55321, 126.972613), // 지도의 중심좌표
level: 4, // 지도의 확대 레벨
mapTypeId: kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
var 데이터 = [
[37.55321, 126.972613, '내용'],
[37.558907, 126.978305, '내용2'],
[37.544647, 126.971986, '내용3']
];
for (var i=0; i
해결하셨나요? 저도 마커가 안떠요ㅠㅠ무엇이 문제일가요?
구글지도에서 표현하고자하는데, 클러링 기능 좀 하는거 알수있을까요??
구글 지도는 API가 달라 구글 지도 api 문서를 참고하셔야합니다.
@@arkaycoding 안녕하세요. 여러번 영상 참고해서 보다가 겨우겨우, 6:26초까지는 잘 따라했는데요. 두번째 마커 하나더 찍어보는거 부터가 막히네요. 똑같이했는데, 저장하고 새로고침한담에 파일열어보면 그전까지는 지도뜨다가 지금은 아예뜨질않네요. 머가문제인건지... 결국엔 8분대로 넘어와서 마커 for하는 부분까지 코드를 해놨는데 이부분은 제가 엑셀에 명칭, 주소등이 상당히 많이있는데 그걸 구글 지도에서는 표현을 하고있거든요. 근데 많아도 너무많아서.. 한반도를 아예 뚫고 나가서 바다까지 표시될정도로 많네요.. 그래서 결국 클러스터를 하고싶은건데, for이라는 반복문 안에 지도에 표시된 위도경도 좌표주소만 계속 넣어주면 되는건가요??
@@user-lw6pc7fv9f 파일로 가지고 계시다면 fs 모듈을 사용하여 파일을 읽은 후 for문으로 쫙 로드해주는게 편합니다.
kakao developer 혹시 링크 좀 주실수 있나요?
구글에 kakao developer 검색하시면 최상단에 나옵니다.
developers.kakao.com
죄송한데..제가 완전 컴맹이라서..혹시 저장은 어떻게 하나요..? 3:17에서 막혔어요..ㅠ
Visual studio에서 저장하기를 누르시면 되는데, 단축키로는 Ctrl + S입니다.
@@arkaycoding감사합니다!!
html 파일이 안열려요.. ㅠ
브라우저에 파일을 드래그 하는 방식으로도 열 수 있습니다.
아케이님 많은 도움이 되었습니다.
저는 이렇게 만들었는데 마커가 생성되지 않네요 뭐가문제일까요?
다음 지도 API
var mapContainer = document.getElementById("map"), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.50408, 126.74939), // 지도의 중심좌표
level: 12, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averrageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
var 데이터 = [
[37.50408, 126.74939, '가치인 독서논술 & 디베이트 본점'],
[37.64579, 126.68516, '김포 지점'],
[37.19605, 127.05774, '동탄 지점'],
[37.36684, 127.12609, '분당수내 지점'],
[37.64675, 127.3041, '남양주 지점'],
[36.37327, 127.31841, '대전 지점']
];
var makers = [];
for (var i = 0; i < 데이터.length; i++) {
// 지도에 마커를 생성하고 표시한다
var maker = new kakao.maps.marker({
position: new kakao.maps.latlng(데이터[i][0], 데이터[i][1]), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : 데이터[i][5]
});
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker);
markers.push(marker);
}
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
해결되셨나요? 해결되셨으면 알려주세요ㅠㅠ저도 마커가 안떠요
@@user-fw3fo9gt6m 저도 해결 못했습니다^^;;;
@@user-yg8gh2cr2w 밑에 해결방법 알려드렸는데 소스를 첨부해드릴까요?
@@user-fw3fo9gt6m 네 첨부해주시면~ 감사해요^^
잘시청했습니다 혹시 구글맵을 사용하는데 mysql에서 한글주소 데이터를 받아와서 geocoding으로 위경도 값으로 변환 후 구글맵에 마커를 찍는게 가능할까요?
ㅇㅇ
지도를 한 지역으로 고정시키는 방법이 있나요? 특정 지역에만 나오게 하고 싶어요
지도 드래그 이동을 막고 싶으시다면 카카오 API 사이트에서 Sample의 "지도 이동 막기" 코드를 활용하시면 됩니다.
저도 마커가 안 나왔었는데 infowindow ->InfoWindow 소문자를 대문자로 바꾸니 해결됬습니다. 마커 안 나오시는 분들 대소문자 확인하세요.
7:12