카카오 지도를 웹사이트에 넣기

카카오 지도를 웹사이트에 삽입해보자

 

워드프레스에 지도를 삽입하면 기본이 구글 지도였는데 우리나라 지도가 더 상세하여 카카로 지도를 삽입해 보려고 실험해 보았다. 지도 위치는 우리 집 큰 병원. HTML지도임으로 이것을 지원하는 사이트는 어디든 삽입할 수 있을 것이다.

나는 여기 내 블로그에 삽입해 본다.

 

아래와 같이 따라하여 결과가 나오는지를 확인할 것이다.

1. 브라우저에서 https://map.kakao.com/
2. 왼쪽 검색에서 [세인트마리 여성병원] 돋보기 클릭
3. 마우스로 원하는 위치 이동 또는 확대
4. 팝업창 하단 우측 끝(3번째 아이콘) 클릭
5. [URL 복사 / HTML 태그 복사]가 나오면 HTML복사 클릭

  6. 'HTML태그 복사' 지도 팝업창이 나타남

   7. 지도 하단에 '소스 생성하기' 청색 버튼 클릭

   8. '일반지도'를 선택

 <!-- * 카카오맵 - 지도 퍼가기 -->

<!-- 1. 지도 노드 적색부분 추가 -->

<div id="daumRoughmapContainer1627905320572" class="root_daum_roughmap root_daum_roughmap_landing" style="width=100%"></div>

 

<!--

 2. 설치 스크립트

 * 지도 퍼가기 서비스를 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" : "1627905320572",

 "key" : "26u6z",

 "mapHeight" : "360"

 }).render();

</script>

 

 

 

 

기본 모드 HTML을 선택하면 내용이 HTML로 보이긴 하지만 수정이나 추가가 안된다.

몇 시간 씨름해서 알아낸건 자바스크립트가 비활성화 되면 안된다는 것이다.

확장 프로그램에 우클릭해제 기능을 설치했더니 이것이 문제를 일으켰다. 사용할 떄 모두 작동하도록 했는지 확인이 필요하다.