블로그에 여행, 맛집 관련 포스트를 작성할 때 위치를 알려주기 위해서 지도 api 를 사용하여 삽입하는데 네이버는 html 넣는 방법을 찾아봐도 없는 거 같고(더 찾아보면 나올 수 있음. 더 찾아보고 방법이 있으면 공유해드리겠습니다.) 구글지도는 iframe 형식으로 삽입할 수 있으나 한국사람들이 많이 사용하지 않을 것같고 기존에 카카오맵 api 를 많이 써온터라 카카오맵(다음지도)을 이용하여 이 블로그에 삽입해야겠다고 생각이 들었다. 아래 URL은 이전 포스트에 카카오맵 삽입한 주소이다.
제주도 대평리 박수기정, 대평리 맛집 정가네
https://markettraders.kr/jeju-cliff/
삽입하는 코드가 직관적으로 보이지 않아 사용하는 방법을 공유해드리면 블로그에 카카오맵 삽입시 많이 도움이 될 거 같아서 이 글을 작성하게 되었다.
카카오맵(다음지도) 블로그에 삽입
카카오맵(다음지도) 를 이용한 블로그에 삽입하는 방법은 두가지 방법이 있으니 자신의 블로그에 맞게 선택해서 삽입하면 됩니다.
1. 내보내기를 이용한 HTML 태그 삽입
우선 자신이 원하는 장소를 카카오지도에서 검색을 한다.
https://map.kakao.com/
백종원 골목식당 프로그램에서 나왔던 연돈 돈까스가 저희 집 근처에 있어서 연돈이라고 검색을 해보았다. 아직 연돈 돈까스를 가보질 않아서 언제쯤 먹을 수 있을지 모르겠지만 제일 핫한 플레이스라고 생각들어 연돈을 선택했다.
HTML 태그 복사
검색 후 오른쪽 상단에 내보내기 버튼을 누른 후 HTML 태그 복사를 클릭한다.
HTML 태그 복사 페이지로 이동하면 아래의 태그를 복사해서 넣는데 제 블로그에는 적합하지 않는 거 같다. 아래 div 가 따로 놀고 지도도 움직여서 볼 수 없어 아쉽다. 난 카카오에서 약도 만들기를 이용해서 지도 생성하는 것을 추천한다.
<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>아래가 소스코드를 삽입해서 카카오맵(다음지도)가 적용된 것이다. 약도만들기에서 필요없다고 생각되는 부분의 항목을 해제하면 깔끔한 지도 정보를 내 블로그에 삽입될 수 있다.
지금까지 카카오맵(다음지도) 블로그에 삽입하는 방법에 대해서 살펴 보았습니다. 다음 포스트에 더 유익한 정보로 찾아뵙겠습니다.