티스토리 블로그에 구글지도 반응형으로 넣는 방법

이번에 오사카 일본여행을 하면서 너무 즐거웠다. 해외여행을 다녀보신분들은 잘 아시다시피 구글지도를 열어볼 일이 참 많다. 그러다보니 아무래도 이 지역과 관련된 여행 블로거 분들의 글을 많이 살펴보게 되는데, 티스토리에 구글 지도를 넣으신 분들이 꽤 된다는 사실이다. 어떻게 넣는거지 싶어서 알아봤고, 생각보다 방법은 간단했다.


티스토리 블로그에 구글 지도를 반응형으로 넣어보자!


보니까 아이프레임(iframe) 방식으로 넣는데, 이렇게 되면 반응형이 아닌 고정형이 되어 버린다. 실제 코드를 살펴보면 가로 및 세로 사이즈가 고정된 방식을 취하는데, 이렇게 되면 반응형이 아니라서 만약 해상도가 떨어지는 모바일에서 보는 경우 지도가 어긋날 수 있다. 따라서 이 글에서는 구글지도를 반응형으로 티스토리에 넣는 방법에 대해 알아보고자 한다.


오사카 여행을 다녀왔으니, 해당 내용을 토대로 작성한 글이 하나 있다. 거기에 이번에 구글 지도를 넣어봤는데 잘 들어가 있다. 특히 사이즈를 줄여도 알아서 가로사이즈가 조절되는 반응형으로 넣어두었기 때문에 어떤 해상도에서든지 가로가 꽉 차도록 나온다. 생각보다 방법은 쉽다.




구글지도에서 원하는 위치를 클릭하면 이렇게 관련 정보가 나온다. 혹은 정확한 주소를 알고 있다면 직접 검색란에 입력하셔도 된다.




블로그에 넣고자 하는 위치가 맞다면, 구글지도의 공유 버튼을 누른다.




그러면 링크 공유와 지도 퍼가기가 나오는데 우리가 쓸 부분은 지도 퍼가기 부분이다. 한번 들어가보자.




지도 퍼가기 부분을 선택하니 이렇게 URL 주소가 나온다. 그 왼쪽에는 중간이라고 써있는 부분이 보이실텐데, 이건 지도의 사이즈를 정하는 부분이다. 어차피 반응형으로 만들 것이므로 신경쓰지 말자. 해당 URL 부분을 복사하고 메모장에 붙여넣는다.




그러면 이런 다소 복잡한 코드로 이루어진 URL 주소가 보인다. 여기서 변경해줘야 하는 부분은 바로 저 빨간색으로 표시가 된 부분으로 기존 가로사이즈가 600픽셀로 고정되어 있다.




여기를 100%로 변경하면 이제 가로사이즈는 자동으로 반응형 크기에 맞춰진다. 알아서 해당 화면에 맞는 가로 사이즈로 변경되기 때문에 삐져나오거나 너무 부족하여 맵이 작게 보일 일은 없다. 단 바로 다음에 있는 height 부분의 수치는 세로 값이다. 여기는 그냥 임의로 늘리셔도 되고 더 줄이셔도 된다. 저 위에서 언급했던 지도 사이즈 부분도 결국 이 수치 부분이 바뀌면서 저장되는 것이다. 세로 사이즈는 400~600 정도로 수정하면 스마트폰에서 보기엔 적당한 것 같다는 생각이다. 이 부분은 정답이 없으니 본인이 마음에드는 높이의 사이즈로 설정하시고, 중요한건 가로 사이즈인 width 값이다. 여기는 무조건 100%로 만들어주면 반응형 구글지도는 완성된다.




수정 완료한 구글 지도 코드를 티스토리의 외부컨텐츠 버튼을 눌러 html 태그 소스 부분에 입력 후 확인을 눌러주면 자연스럽게 구글지도가 티스토리에 들어간다.




이건 현재 PC버전에서 들어간 모습이다. 가로 사이즈가 내 티스토리 사이즈에 맞게 꽉 차게 들어간 모습이다.




이번에는 모바일 해상도에서의 모습이다. 창 크기를 줄이면 구글지도 또한 자동으로 가로사이즈가 딱 맞게 줄어드는것을 확인하실 수 있다. 이렇게 해서 티스토리에 구글지도를 반응형을 넣는 방법은 무척 쉽다는것을 확인했다. 끝.


구글문서 웹 게시 때 엑셀 내용 그대로 티스토리 블로그에 올리는 방법

블로그 글쓰기 - 경어체(존댓말) VS 평어체(반말) 당신의 선택은?

티에디션 상단에 고정형 이미지 배너 광고를 반응형처럼 만들기


"친절한효자손 취미생활" 을 검색!


이 글을 공유하기

댓글(4)

  • 2017.12.13 13:24 신고

    구글지도가 최고죠 ㅎㅎ

  • 2017.12.17 23:00 신고

    친절한 효자손님~우연찮게 검색으로 방문하게 되었는데 너무 알아듣기쉬운설명과 보기좋은 홈설정으로 오늘 하루종일 효자손님 블로그에서 살았네요~ ;;;;저는 이제 시작하는 티스토리블로거라 죄송하지만 홈화면을 좀 ... 따라해보았습니다... 넘 이뻐요^^;;;;
    물론 효자손님 말씀처럼 블로그의 성격은 저만의 개성으로 만들어 갈것이구용~^^ 아직 너무 어렵지만..... ㅠㅠ
    일단 감사하다는 말씀남기고싶어 댓글남깁니다. 더 번창하세욧!!^^

    • 2017.12.18 06:00 신고

      안녕하세요~! 별것없는 이곳까지 와주셔서 감사합니다. 도움이될지는몰라도 이것저것 많이써놨으니 찬찬히 둘러보시면 감사하겠습니다~!

Designed by JB FACTORY