STEADY AWAY BLOG

카카오맵 티스토리 블로그에 넣는 방법은?

안녕하세요. 여행지, 맛집, 카페 등 다양한 내용에서 지도가 필요한데요. 이럴 때 지도를 넣는 방법 설명드립니다.

구글 지도, 네이버 지도도 있지만 티스토리에선 왜인지 카카오 맵을 넣어야 할 것 같은 그런 느낌이 있습니다..... 티스토리 서비스를 카카오에서 하는 거지 티스토리 자체는 카카오 것은 아닌데.... 흐흠......

암튼!! 다른 지도도 다 비슷하니 기본만 알고 가신다면 다른 제조사에서 만든 지도도 똑같이 넣을 수 있습니다.

지도를 넣는 방법은 간단합니다. 먼저 카카오맵으로 들어가 주세요.

카카오맵에서 자신의 목적지를 선택합니다. 저는 경복궁으로 해보도록 하겠습니다.

지도에서 HTML 태그 복사를 선택합니다.

소스 생성하기를 클릭하면 일반지도와 이미지 지도가 있습니다.

일반지도는 웹페이지 안에서 움직일 수 있는 지도며, 이미지 지도는 사진만 한 장 넣어놓는 지도입니다.

둘 다 예시를 보여드리겠습니다.

지도 넣는 방법

복사된 httml 소스를 html 글쓰기를 이용하여 원하는 위치에 그대로 복붙 하면 됩니다. 

이미지 지도 역시 동일한 방법으로 넣어주시면 됩니다. 그 차이점은 아래와 같습니다.

일반지도

<좌우로 지도를 움직여봐 주세요>

이미지 지도

로드뷰길찾기지도 크게 보기

혹시 포스팅을 직접 작성하시면서 지도가 아래와 같이 보인다면 정상입니다. 미리보기에서만 지도가 제대로 움직이는 것을 확인할 수 있습니다.

스크립트로 실행되는 지도는 편집 화면에서는 이렇게 보이지만 미리보기나 포스팅 발행 후 확인하게 되면 제대로 보입니다.

이렇게만 하면 끝? 간단한데?

이렇게만 하면 지도가 삽입은 되지만 몇 가지 문제점이 발생합니다. 

바로 웹과 모바일에서 봤을 때 서로 가로의 픽셀 사이즈가 달라 지도가 한쪽으로 치우치거나 모바일에 맞추면 웹이 너무 작거나 또는 웹에 맞추면 모바일에선 너무 크게 나오는 문제점입니다.

그래서 해당 지도를 웹에서도 모바일에서도 크기가 변경될 수 있도록 html 소스를 일부 수정할 예정입니다.

모바일에 맞추면 : 웹페이지에서 작음

웹페이지에 맞추면 : 모바일에서 너무 큼

이미지로만 삽입

이미지 지도만 삽입하는 방법입니다. 해당 내용을 바로 위에 설명해서 추가로 더 설명하진 않겠습니다.

하지만 별로 추천드리진 없습니다.

일반지도를 반응형으로 변경

이 방법을 추천드립니다. 

모바일, 웹페이지 모두 지도 가로폭을 꽉 채워서 볼 수 있어서 매우 유용합니다.

일반지도를 반응형으로 변경하는 방법은?

html 편집으로 들어갑니다

아래 이미지와 같이

style="width:100%" 추가

"mapwidth":"640", 삭제합니다.

위 이미지와 같이 HTML 소스를 수정하면 가로폭이 100%로 되어 있는 지도를 확인할 수 있습니다.

제가 아래쪽에 하나 더 예시로 넣어드리고 싶은데 이걸 넣으면 위에 이미 지도가 있어서 제대로 표현이 되지 않네요.

이상 카카오맵을 포스팅에 넣을 경우 접속 기기에 따라 가로폭이 문제가 되는 걸 해결하는 포스팅을 해보았습니다.

감사합니다.