아임웹 코드 모음

아임웹 카카오맵 지도 삽입하기 (코드)

1. 시작하며

아임웹에서는 지도 위젯을 활용하여 네이버 지도와 구글 지도를 삽입할 수 있지만, 카카오맵 지도는 기본 제공되지 않습니다.
따라서, 카카오맵을 삽입하려면 코드 위젯을 활용하여 직접 구현해야 합니다.

이번 글에서는 아임웹에서 카카오맵 지도를 추가하는 방법을 소개해 드리겠습니다.
간단한 코드 수정만으로 손쉽게 적용할 수 있으니 아래 내용을 참고해 주세요!

2. 카카오맵 지도 삽입하기

2.1 카카오맵 소스 코드 복사하기

카카오맵에서 원하는 장소를 검색한 후 클릭합니다.
‘내보내기’ 아이콘을 클릭한 후, 'HTML 태그 복사'를 합니다.

카카오맵 사이트 바로가기

필요 시 지도 크기, 아이콘, 확대/축소 설정을 조정한 후 ‘소스 생성하기’ 버튼을 클릭합니다.
생성된 소스 코드를 복사한 후, 메모장에 붙여 넣습니다.

2.2 반응형 설정을 위한 코드 수정

아래의 코드에서 ID값, timestamp값, key값을 변경하여 지도 크기를 반응형으로 설정할 수 있습니다.

<!-- 1. 지도 노드 -->
<div id="ID값" class="root_daum_roughmap root_daum_roughmap_landing"></div>

<!-- 반응형 스타일 적용 -->
<style>
  #ID값{
    width: 100%;
    max-width: 640px; /* 최대 너비 지정, 필요시 너비 수정 */
    height: 360px; /* 기본 높이, 필요시 높이 수정 */
  }

  /* 화면이 768px 이하일 때 (태블릿 및 모바일) */
  @media (max-width: 768px) {
    #ID값{
      height: 280px; /* 필요시 높이 수정 */
    }
  }

  /* 화면이 480px 이하일 때 (스마트폰) */
  @media (max-width: 480px) {
    #ID값{
      height: 220px; /* 필요시 높이 수정 */
    }
  }
</style>

<!-- 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">
  document.addEventListener("DOMContentLoaded", function() {
    new daum.roughmap.Lander({
      "timestamp": "timestamp값",
      "key": "key값",
      "mapWidth": "100%",
      "mapHeight": document.getElementById('ID값').offsetHeight
    }).render();
  });
</script>

코드 수정 방법