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

After Effects 엥커포인트 중앙으로 이동하는 방법 및 스크립트

After Effects 에서 애니메이션을 하기 위해서는 움직이는 대상의 Anchor Point 에 따라서 크기나 위치, 회전 등의 차이가 있습니다. After Effect 에서는 Layer content 에...

제주도 도로교통상황, 통제상황 및 이번주 제주도 날씨 2023-01-25

제주도로교통상황 한라산 탐방은 현재 전면 통제중이며 제주시와 서귀포시를 잇는 1100도로, 5.16도로 전 구간은 전차량 통제상황, 소형차의 경우 제1산록도로가 통제 상황입니다. 제주교통통제상황: https://www.jjpolice.go.kr/jjpolice/notice/traffic.htm ...

[EPIC GAME] Horizon Chase Turbo 2022.12.18 까지 무료 다운로드

Horizon Chase Turbo 를 2022.12.18일 01:00 까지 EPIC GAME 에서 무료로 다운 받을 수 있습니다. 오락실 자동차와 같은 레이싱 게임입니다. https://store.epicgames.com/ko/p/horizon-chase-turbo https://www.youtube.com/watch?v=5LMugZ300L8 Horizon Chase Turbo Horizon Chase Turbo는...

제주도로교통상황 및 이번주 제주도 날씨 2022-12-17 현재

제주도로교통상황 한라산 탐방은 현재 전명 통제중이며 제주시와 서귀포시를 잇는 1100도로 전 구간은 통제상황입니다. 5.16도로 마방목지~성판악 / 성판악~숲터널 구간은 소형 자량인 경우 체인을 설치해야만 운행 가능합니다. 제주지방기상청은...