카카오 지도 퍼가기 중앙 정렬 및 반응형 변환

블로그 글에 카카오 지도 링크 첨부하는 방법

여행 후기를 올릴 때 캡처 이미지로만 위치를 공유하면 일일이 장소를 재검색해야 하는 번거로움이 생깁니다.

반면 카카오 지도 직접 링크를 넣어두면 링크 클릭 한 번으로 위치 정보를 확인하고, 자신의 카카오맵에 ‘저장’하거나 ‘길찾기’로 바로 연동할 수 있어 포스팅의 정보 가치가 훨씬 올라갑니다.

1. 카카오맵에서 장소 검색

• https://map.kakao.com/

공유 – HTML 태그 복사

소스 생성하기

일반지도 복사

2. 지도 붙여넣기

• 카카오맵 소스 복사 코드

<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1786380477727" class="root_daum_roughmap root_daum_roughmap_landing"></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" : "1786380477727",
		"key" : "spgxga4356g",
		"mapWidth" : "640",
		"mapHeight" : "360"
	}).render();
</script>

• 위의 소스를 붙여 넣으면 아래와 같이 포스팅 글에 지도를 삽입할 수 있습니다.

모바일 화면에서 수평 스크롤이 발생하는 문제 발생

3. 지도 붙여넣기 및 반응형 적용

• JavaScript 수정

<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1786380477727" class="root_daum_roughmap root_daum_roughmap_landing" style="margin: 0 auto;"></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">
  // 화면 너비에 따라 크기 변수 설정 (768px 이하 모바일: 300x300 / PC: 640x360)
  var isMobile = window.innerWidth <= 768;
  var widthValue = isMobile ? "300" : "640";
  var heightValue = isMobile ? "300" : "360";

  new daum.roughmap.Lander({
    "timestamp" : "1786380477727",
    "key" : "spgxga4356g",
    "mapWidth" : widthValue,
    "mapHeight" : heightValue
  }).render();
</script>

페이지가 로드될 때 브라우저 너비(window.innerWidth)를 확인하여, 모바일 환경(768px 이하)일 때와 PC 환경일 때의 크기 값을 조건문으로 나누어 전달.

※ 기능 상세

1. 지도의 반응형 동적 크기 설정 (JavaScript)

• window.innerWidth를 활용해 접속한 기기의 화면 너비를 감지.
• 브라우저 너비가 768px 이하(모바일)인 경우 지도를 300×300 크기로 변경.
• 브라우저 너비가 768px 초과(PC)인 경우 기존 640×360 크기 유지.

2. 레이아웃 중앙 정렬 (CSS Inline Style)

• 지도 컨테이너 div id="daumRoughmapContainer…"에 style="margin: 0 auto;" 속성 추가.
• 지도가 부모 요소 내에서 좌우 중앙에 위치하도록 정렬.

3. 한계점

• 현재 방식은 페이지가 처음 로드될 때의 너비만 측정하므로, 스마트폰을 가로/세로로 회전하거나 PC 브라우저 창 크기를 조절(Resize)할 때는 재조정되지 않음.

관련 링크

• 구글 지도 퍼가기 중앙 정렬 및 반응형 변환