구글 블로그에 카카오맵 지도 반응형으로 삽입하는 방법

구글 블로그를 운영하는 블로거 중에서도 맛집인 식당이나 카페의 리뷰를 올리는 사람이 있을 것이다.

네이버 블로그는 네이버 지도를 올리기 편하게 되어있고, 티스토리 블로그 또한 카카오맵으로 특정 장소의 위치를 올리기 편하게 되어있다.

그런데 구글 블로그의 에디터에는 그런 게 없다.

역시 또 다른 블로그 플랫폼에 비해서 약간 불편한 방법으로 올려야 한다.

구글 블로그에 지도를 삽입하는 두 가지 선택지

구글 블로그에는 구글맵, 혹은 카카오맵의 지도를 올릴 수 있다.

네이버 지도는 예전에는 올릴 수 있었다고 하는데, 버전이 업데이트가 되면서 이전에는 존재했던 'HTML 태그 복사' 메뉴가 사라졌다.

네이버 지도는 네이버 블로그에서만 올릴 수 있게 된 것이다. (아주 예전부터 네이버는 이렇게 좀 폐쇄적인 면이 있었다.)

더 정확히는 API를 사용하면 올릴 수 있는 것도 같은데, 방법도 초보자들에게는 복잡할 테고, 무엇보다 블로그에 방문자가 많아진다면 유료로 사용해야 하기 때문에 네이버 지도는 포기하자.

그렇다면 카카오맵과 구글맵 중에서 선택을 해야 하는데, 국내의 식당이나 카페 등의 업체는 확실히 카카오맵이 정리가 더 잘 되어있다.

또, 국내에서 검색엔진은 다음보다 구글을 더 많이 사용하지만, 지도앱은 구글맵보다 카카오맵을 더 많이 사용하기 때문에 결론은 카카오맵의 지도를 올리는 것이 더 낫다.

구글 블로그에 카카오맵 지도를 삽입하는 방법

카카오맵에서 구글 블로그에 올릴 장소를 검색한다.

그리고 그 장소 위쪽으로 생기는 아주 작은 아이콘들 중에서 + 아이콘을 클릭한다.

그러면 이렇게 메뉴가 크게 펼쳐진다.

세 번째의 화살표가 있는 아이콘을 클릭하면 드롭다운 메뉴가 나타나는데, 그중에서 'HTML 태그 복사'를 클릭하자.

'지도 크기'는 손댈 필요 없다.

나중에 우리가 수정할 것이기 때문이다.

'아이콘 변경'은 손댈 필요가 없지만, 두 번째랑 네 번째 아이콘이 특히 예쁘기 때문에 바꿔도 괜찮을 것 같다.

그리고 마지막으로 소스 생성하기 버튼을 클릭한다.

일반 지도가 선택이 된 상태에서 소스 코드를 복사하자.

이것을 블로그의 에디터에 붙여 넣으면 된다.

여기까지는 초보자가 아니라면 누구나 할 수 있을만한 작업이다.

그런데 여기서 끝내면 작은 문제가 생긴다.

지도의 크기가 픽셀 값으로 고정이 되어있기 때문에 모바일 환경에서는 지도가 잘린 채로 표시가 된다.

모바일 환경에 맞춰서 지도의 크기를 줄이면, 데스크톱 환경에서는 지도가 너무 작아서 답답하게 보일 것이다.

카카오맵 지도를 반응형으로 수정하자

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

이 코드는 카카오맵에서 복사한 원본 코드다.

이 코드를 아래처럼 수정해야 한다.

<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="mapWrap" style="height: 380px; position: relative; width: 100%;">
  <div id="daumRoughmapContainer1761896953087" class="root_daum_roughmap root_daum_roughmap_landing" style="height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;">
  </div>
</div>

<!-- 2. 설치 스크립트 (한 페이지에 1번만 넣기) -->
<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" : "1761896953087",
		"key" : "yx6gdjxi5sn",
		"mapWidth": "100%",
		"mapHeight": "100%"
	}).render();
</script>

<!-- 1. 지도 노드 --> 구간의 <div> 태그를 또 다른 <div> 태그로 감쌌다.

그리고 두 <div> 태그에 style 속성이 추가됐다.

<!-- 2. 설치 스크립트 --> 구간은 수정한 게 없다. (주석만 짧게 바꿨을 뿐..)

주석에 쓰여있는 것처럼 한 포스트에 지도를 2개 이상 넣을 경우에는 설치 스크립트 코드는 하나만 삽입하도록 하자.

<!-- 3. 실행 스크립트 -->에서는 mapWidth와 mapHeight의 값이 고정된 픽셀 값에서 100%로 바뀌었다.

이렇게 수정하면 삽입한 카카오맵 지도가 반응형이 되어서 데스크톱에서도 모바일에서도 지도가 가로 폭 전체를 차지하게 된다.

style 속성의 height: 380px를 조금 더 늘리면 장소의 연락처도 뜨게 된다.

현재 설정해 놓은 380px은 연락처는 잘리고 주소만 뜨게 설정된 값이다.

지도를 삽입할 때마다 코드를 수정해야 하는 작은 번거로움이 있지만, 이렇게 한 번 설정해두면 데스크톱과 모바일 어디서든 깔끔하게 보이는 반응형 지도를 표시할 수 있다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.