다음지도 카카오맵 가로 사이즈 100% 맞추기

찾아오시는길이나 약도를 표시할 때 다음지도(카카오맵)에서 지도퍼가기를 이용하는 경우가 있습니다.

 

반응형 사이트를 제작할 때 아주 유용한 다음 지도 가로 사이즈를 항상 100%가 되게 수정하는 방법에 대해 알아봅니다.

 

서울시청 지도를 예로 들어볼게요.

 

지도 퍼가기로 소스 복사

 

다음 지도에서 장소검색 후 공유하기 > html 태그 복사를 선택합니다.

 

 

원하는 지도 크기를 설정할 수 있는데 %는 안되고 px 절대값으로만 입력이 가능합니다.

기본 640 px * 360 px 입니다.

 

우선 소스 생성하기를 클릭해서 소스를 복사하세요.

 

 

복사한 지도 소스를 붙여넣으면 아래와 같이 보입니다.

 

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

 

이제 어디를 수정해야 할지 알려드릴게요.

 

가로 사이즈 주석처리

3번 실행 스크립트에서

가로 사이즈 설정 부분인

"mapWidth" : "640", 을 주석 처리해줍니다.

 

// "mapWidth" : "640", 이렇게요.

 

* mapwidth 는 가로 사이즈

mapheight 는 세로 사이즈입니다.

 

<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
  new daum.roughmap.Lander({
    "timestamp" : "1640149976068",
    "key" : "28iiw",
    // "mapWidth" : "640", //가로
    "mapHeight" : "360" //세로
  }).render();
</script>

 

지도 노드에 style 추가

그런 다음 1번 지도 노드에서

div 끝부분에 style을 추가합니다.

<div id="" class="" style="width:100%;">

 

<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1640149976068" class="root_daum_roughmap root_daum_roughmap_landing" style="width:100%;"></div>

 

세로 사이즈 mapheight 수정

가로를 100%에 맞췄더니 세로가 너무 좁아진다 싶으면 mapheight 를 조정해 주세요.

360 → 500

수정을 마친 소스는 아래와 같습니다.

 

<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1640149976068" 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" : "1640149976068",
    "key" : "28iiw",
    // "mapWidth" : "640", //가로
    "mapHeight" : "500" //세로
  }).render();
</script>

 

만약 별도의 파일에 css를 분리해서 사용한다면 

가로 사이즈만 주석처리하고

사용하는 .css 파일을 열어 아래 스타일을 추가하면 됩니다.

 

.root_daum_roughmap {width:100% !important;}

 

[HTML] video 태그로 백그라운드 영상 삽입하기

[HTML] video 태그로 백그라운드 영상 삽입하기