안녕하세요, 에어뷰 입니다.
오늘은 구글지도를 티스토리에 삽입하는 방법과
폭이 좁은 기기(핸드폰, 태블릿 등)로 포스팅을 볼 때
구글지도를 보기 불편한 부분을 해결하는 방법을 알려드리겠습니다.
먼저 어떤 문제가 발생할 수 있는지부터 간단히 보겠습니다.
보통 PC버전으로 볼 때는 문제가 없는 경우가 많습니다.
이유는 아래에서 알려드리겠습니다.
문제는 핸드폰과 같은 비교적 화면이 작은 기기에서 구글 지도를 보게 될 때 발생합니다.
왼쪽이 스크롤을 내리다가 구글지도를 보는 경우입니다.
구글지도가 다 보이지 않고 오른쪽 부분이 짤린 것을 볼 수 있습니다.
양손을 이용하여 축소를 시켜보면, 오른쪽 그림과 같이 전체지도를 볼 수는 있지만,
글의 폭을 벗어난 큰 폭으로 삽입되었기 때문에
다시 스크롤을 올려 글을 보려면 화면을 다시 확대해서 글을 봐야하는 불편함이 있습니다.
문제를 해결해보겠습니다.
먼저 구글맵 사이트에 접속합니다. (https://www.google.co.kr/maps/)
위와 같이 우리나라가 기본적으로 보입니다.
예시로 에펠탑을 첨부해보도록 하겠습니다.
에펠탑을 검색하면 위와 같이 나타납니다. [공유]를 눌러줍니다.
[지도 퍼가기]를 누르고, [HTML 복사]를 눌러줍니다.
붙여넣기(Ctrl+v)를 해서 코드를 확인해 보면, 아래와 같습니다.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.9916256937618!2d2.292292615555007!3d48.858370079287425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2z7JeQ7Y6g7YOR!5e0!3m2!1sko!2skr!4v1583068313376!5m2!1sko!2skr" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
모바일에서 문제가 나타나는 이유는,
width(가로 폭)이 600px로 고정되어 있기 때문입니다.
PC버전으로 글을 볼 때는 글쓰기의 가로폭이 860px 이기 때문에
구글지도가 적절한 크기로 중앙에 삽입되지만,
가로폭이 600px 보다 작은 기기로 보거나,
PC버전이어도 600px 아래의 가로폭을 가지고 있다면, 같은 문제가 발생합니다.
그렇다면, 어떤 가로폭에도 상관없이 꽉 채우는 반응형 구글지도로 만들어 보겠습니다.
위와 같이 width(가로폭) 부분을 숫자(600px)에서 100% 로 바꾸어 줍니다.
그러면 어느 화면에서도 가로로 꽉 차는 구글지도가 삽입됩니다.
height(높이)는 100%로 하면 글의 전체 높이이기 때문에
반응형으로 처리하면 안 되며, 특정 값으로 적절히 사용해 주시면 됩니다.
간단히 확인해 보고 싶으신 분들은,
위 첨부파일의 코드를 그대로 복사해서 외부컨텐츠에 붙여넣어
반응형 에펠탑 구글지도를 넣어볼 수 있습니다.
위 사진은 갤럭시 S10e 기준으로 높이(height)가 450px 일 때 구글지도 입니다.
모바일 화면의 80% 가량을 차지하는데, 좀 더 작게 하고 싶으시면
300px, 350px, 400px 등 개별 선호도에 맞게 줄여서 사용하셔도 되겠습니다.
위 사진은 가로 폭이 600px인 구글지도를 넣었을 때 입니다.
PC 버전에서 글쓰기 가로 폭은 860px 이므로, 적절한 크기의 지도가 삽입되었습니다.
지도 클릭 후 왼쪽/가운데/오른쪽 정렬이 가능합니다.
다음은 반응형 코드(100%)를 사용하여 넣은 구글지도 입니다.
글쓰기 가로 폭을 꽉 채우는 것을 확인할 수 있습니다.
이번에는 비교를 해보겠습니다.
위는 600px 구글지도, 아래에는 100% 반응형 구글지도 입니다.
PC 버전에서는 가로 폭이 충분하기 때문에 에러는 발생하지 않습니다.
하지만 모바일에서는 역시 600px 는 글쓰기의 폭을 넘게 보이고
반응형은 초록색 경계선의 글쓰기 폭 내에 딱 맞게 들어간 것을 확인할 수 있습니다.
끝.
본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.