test
Home IT/WEB 카카오맵(다음지도) 블로그에 삽입하는 방법

카카오맵(다음지도) 블로그에 삽입하는 방법

블로그에 여행, 맛집 관련 포스트를 작성할 때 위치를 알려주기 위해서 지도 api 를 사용하여 삽입하는데 네이버는 html 넣는 방법을 찾아봐도 없는 거 같고(더 찾아보면 나올 수 있음. 더 찾아보고 방법이 있으면 공유해드리겠습니다.) 구글지도는 iframe 형식으로 삽입할 수 있으나 한국사람들이 많이 사용하지 않을 것같고 기존에 카카오맵 api 를 많이 써온터라 카카오맵(다음지도)을 이용하여 이 블로그에 삽입해야겠다고 생각이 들었다. 아래 URL은 이전 포스트에 카카오맵 삽입한 주소이다.

inline ad

제주도 대평리 박수기정, 대평리 맛집 정가네
https://markettraders.kr/jeju-cliff/

삽입하는 코드가 직관적으로 보이지 않아 사용하는 방법을 공유해드리면 블로그에 카카오맵 삽입시 많이 도움이 될 거 같아서 이 글을 작성하게 되었다.

카카오맵(다음지도) 블로그에 삽입

카카오맵(다음지도) 를 이용한 블로그에 삽입하는 방법은 두가지 방법이 있으니 자신의 블로그에 맞게 선택해서 삽입하면 됩니다.

1. 내보내기를 이용한 HTML 태그 삽입

우선 자신이 원하는 장소를 카카오지도에서 검색을 한다.
https://map.kakao.com/

백종원 골목식당 프로그램에서 나왔던 연돈 돈까스가 저희 집 근처에 있어서 연돈이라고 검색을 해보았다. 아직 연돈 돈까스를 가보질 않아서 언제쯤 먹을 수 있을지 모르겠지만 제일 핫한 플레이스라고 생각들어 연돈을 선택했다.

HTML 태그 복사

검색 후 오른쪽 상단에 내보내기 버튼을 누른 후 HTML 태그 복사를 클릭한다.

카카오맵(다음지도) 검색
카카오맵(다음지도) 검색

HTML 태그 복사 페이지로 이동하면 아래의 태그를 복사해서 넣는데 제 블로그에는 적합하지 않는 거 같다. 아래 div 가 따로 놀고 지도도 움직여서 볼 수 없어 아쉽다. 난 카카오에서 약도 만들기를 이용해서 지도 생성하는 것을 추천한다.

카카오맵(다음지도)  내보내기 - HTML 태그 복사
카카오맵(다음지도) 내보내기 – HTML 태그 복사
<a href="https://map.kakao.com/?urlX=362010&urlY=-65152&urlLevel=3&map_type=TYPE_MAP&map_hybrid=false" target="_blank"><img width="504" height="310" src="https://map2.daum.net/map/mapservice?FORMAT=PNG&SCALE=2.5&MX=362010&MY=-65152&S=0&IW=504&IH=310&LANG=0&COORDSTM=WCONGNAMUL&logo=kakao_logo" style="border:1px solid #ccc"></a><div class="hide" style="overflow:hidden;padding:7px 11px;border:1px solid #dfdfdf;border-color:rgba(0,0,0,.1);border-radius:0 0 2px 2px;background-color:#f9f9f9;width:482px;"><strong style="float: left;"><img src="//t1.daumcdn.net/localimg/localimages/07/2018/pc/common/logo_kakaomap.png" width="72" height="16" alt="카카오맵"></strong><div style="float: right;position:relative"><a style="font-size:12px;text-decoration:none;float:left;height:15px;padding-top:1px;line-height:15px;color:#000" target="_blank" href="https://map.kakao.com/?urlX=362010&urlY=-65152&urlLevel=3&map_type=TYPE_MAP&map_hybrid=false">지도 크게 보기</a></div></div>

2. 약도만들기를 이용한 코드 삽입

다시 연돈을 검색해서 A 연돈을 클릭하면 팝업이 뜨는데 여기서 상세보기를 클릭한다.

상세페이지에서 오른쪽 깃발 아이콘을 클릭하면 약도만들기 페이지로 이동한다.

약도 만들기 페이지는 지도크기, 아이콘 변경, 노출정보(주소/전화번호,주변정류장, 주변버스, 메모) 등을 제어하여 가져올 수 있으며 설정 후 소스 생성하기 버튼을 클릭한다.

소스 생성하기 버튼을 클릭하면 레이어팝업이 뜨면서 소스코드를 복사한다.

소스 코드를 복사하면 아래와 같은 코드가 복사되고 블로그에 삽입하면 내가 원하는 형태의 카카오지도가 삽인된 거 확인할 수 있다. 제 블로그는 반응형 블로그라 지도 가로 사이즈가 100%가 되면 자연스럽게 반응형 처리가 된다. 기본은 가로 640px 로 불려와지는데 <div class=”root_daum_roughmap root_daum_roughmap_landing”></div> 에 style 추가하면 가로가 100%로 적용된다.
style=”width=100%” 코드를 추가해주고 “mapWidth” : “640”, 코드는 삭제하면 된다.

<!--
	* 카카오맵 - 약도서비스
	* 한 페이지 내에 약도를 2개 이상 넣을 경우에는
	* 약도의 수 만큼 소스를 새로 생성, 삽입해야 합니다.
-->
<!-- 1. 약도 노드 -->
<div id="daumRoughmapContainer1587478791385" class="root_daum_roughmap root_daum_roughmap_landing" style="width=100%"></div>

<!-- 2. 설치 스크립트 -->
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>

<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
	new daum.roughmap.Lander({
		"timestamp" : "1587478791385",
		"key" : "y35m",
		"mapHeight" : "360"
	}).render();
</script>

아래가 소스코드를 삽입해서 카카오맵(다음지도)가 적용된 것이다. 약도만들기에서 필요없다고 생각되는 부분의 항목을 해제하면 깔끔한 지도 정보를 내 블로그에 삽입될 수 있다.

지금까지 카카오맵(다음지도) 블로그에 삽입하는 방법에 대해서 살펴 보았습니다. 다음 포스트에 더 유익한 정보로 찾아뵙겠습니다.

RECENT POSTS

개미를 퇴치하는 자연적인 방법 중 가장 효과적인 방법 6가지

개미를 자연스럽게 퇴치하는 여러 가지 방법 중 가장 효과적인 몇 가지 방법을 소개하겠습니다. 이 방법들은 모두 집에서 쉽게 구할 수 있는 재료를 사용하여 개미를...

부심장을 지키는 올바른 식단: 먹으면 좋은 음식과 나쁜 음식

부정맥 환자는 심장 건강을 유지하고 증상을 관리하기 위해 특정 음식을 피하고, 심장 건강에 좋은 음식을 섭취하는 것이 중요합니다. 다음은 부정맥 환자가 피해야 나쁜 음식과...

부정맥 arrhythmia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 부정맥(Arrhythmia)은 심장의 정상적인 리듬이 불규칙해지거나 비정상적으로 빨라지거나 느려지는 상태를 말합니다. 이는 심장의 전기적 신호 전달에 문제가 생겨 발생하며, 다양한 원인과 증상을 가지고 있습니다. 원인 부정맥의 원인은...

폐렴 pneumonia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 폐렴(Pneumonia)은 폐의 폐포(air sacs)에 염증이 생겨 액체나 고름이 차는 질환입니다. 주로 세균, 바이러스, 곰팡이 등의 감염에 의해 발생하며, 심한 경우 생명을 위협할 수 있습니다. 원인 폐렴의...