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

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...

[javascript]Math.min, Math.max 사용방법

Math.min과 Math.max는 JavaScript의 Math 객체에서 제공하는 메서드로, 각각 주어진 숫자들 중 최소값과 최대값을 반환합니다. 이 메서드들은 다양한 수학 연산과 데이터 처리에서 유용하게 사용될 수...

널 병합 연산자 Nullish coalescing operator (??) 에 대해서 알아보자.

널 병합 연산자 Nullish coalescing operator (??)는 JavaScript에서 null이나 undefined 값을 체크하는 데 사용되는 연산자입니다. 이 연산자는 좌변의 피연산자가 null 또는 undefined일 경우 우변의 피연산자를 반환하고, 그렇지 않은 경우 좌변의...

[css]부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법

overflow: hidden 속성 사용 부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이...