티스토리에 구글지도, 모바일(핸드폰) 크기에 맞게 가져오는 방법

안녕하세요, 에어뷰 입니다.

오늘은 구글지도를 티스토리에 삽입하는 방법과 

폭이 좁은 기기(핸드폰, 태블릿 등)로 포스팅을 볼 때

구글지도를 보기 불편한 부분을 해결하는 방법을 알려드리겠습니다.

먼저 어떤 문제가 발생할 수 있는지부터 간단히 보겠습니다.

보통 PC버전으로 볼 때는 문제가 없는 경우가 많습니다.

이유는 아래에서 알려드리겠습니다.

문제는 핸드폰과 같은 비교적 화면이 작은 기기에서 구글 지도를 보게 될 때 발생합니다.

왼쪽이 스크롤을 내리다가 구글지도를 보는 경우입니다.

구글지도가 다 보이지 않고 오른쪽 부분이 짤린 것을 볼 수 있습니다.

양손을 이용하여 축소를 시켜보면, 오른쪽 그림과 같이 전체지도를 볼 수는 있지만,

글의 폭을 벗어난 큰 폭으로 삽입되었기 때문에 

다시 스크롤을 올려 글을 보려면 화면을 다시 확대해서 글을 봐야하는 불편함이 있습니다.

문제를 해결해보겠습니다.

구글 지도(Google Map) 티스토리에 업로드 하기

먼저 구글맵 사이트에 접속합니다. (https://www.google.co.kr/maps/)

위와 같이 우리나라가 기본적으로 보입니다.

예시로 에펠탑을 첨부해보도록 하겠습니다.

에펠탑을 검색하면 위와 같이 나타납니다. [공유]를 눌러줍니다.

[지도 퍼가기]를 누르고, [HTML 복사]를 눌러줍니다.

붙여넣기(Ctrl+v)를 해서 코드를 확인해 보면, 아래와 같습니다.

모바일에서 문제가 나타나는 이유는, 

width(가로 폭)이 600px로 고정되어 있기 때문입니다.

PC버전으로 글을 볼 때는 글쓰기의 가로폭이 860px 이기 때문에 

구글지도가 적절한 크기로 중앙에 삽입되지만, 

가로폭이 600px 보다 작은 기기로 보거나, 

PC버전이어도 600px 아래의 가로폭을 가지고 있다면, 같은 문제가 발생합니다.

구글지도, 가로 폭(width)에 상관없이 적용되는 반응형으로 만들기

그렇다면, 어떤 가로폭에도 상관없이 꽉 채우는 반응형 구글지도로 만들어 보겠습니다.

에펠탑 반응형 구글지도 코드.txt

위와 같이 width(가로폭) 부분을 숫자(600px)에서 100% 로 바꾸어 줍니다.

그러면 어느 화면에서도 가로로 꽉 차는 구글지도가 삽입됩니다.

height(높이)는 100%로 하면 글의 전체 높이이기 때문에

반응형으로 처리하면 안 되며, 특정 값으로 적절히 사용해 주시면 됩니다.

간단히 확인해 보고 싶으신 분들은, 

위 첨부파일의 코드를 그대로 복사해서 외부컨텐츠에 붙여넣어 

반응형 에펠탑 구글지도를 넣어볼 수 있습니다.

위 사진은 갤럭시 S10e 기준으로 높이(height)가 450px 일 때 구글지도 입니다.

모바일 화면의 80% 가량을 차지하는데, 좀 더 작게 하고 싶으시면 

300px, 350px, 400px 등 개별 선호도에 맞게 줄여서 사용하셔도 되겠습니다.

위 사진은 가로 폭이 600px인 구글지도를 넣었을 때 입니다.

PC 버전에서 글쓰기 가로 폭은 860px 이므로, 적절한 크기의 지도가 삽입되었습니다.

지도 클릭 후 왼쪽/가운데/오른쪽 정렬이 가능합니다.

다음은 반응형 코드(100%)를 사용하여 넣은 구글지도 입니다.

글쓰기 가로 폭을 꽉 채우는 것을 확인할 수 있습니다.

[600px / 100%] 구글지도, [PC / 모바일] 비교

이번에는 비교를 해보겠습니다. 

위는 600px 구글지도, 아래에는 100% 반응형 구글지도 입니다.

PC 버전에서는 가로 폭이 충분하기 때문에 에러는 발생하지 않습니다.

하지만 모바일에서는 역시 600px 는 글쓰기의 폭을 넘게 보이고

반응형은 초록색 경계선의 글쓰기 폭 내에 딱 맞게 들어간 것을 확인할 수 있습니다.

끝.