티스토리에 구글맵 삽입방법 총정리 (+여행 블로거 필수)

현재 블로그에서 해외생활과 관련된 내용을 다루고 있다 보니, 아무래도 사진이나 영상, 지도와 같은 시각적인 자료들을 자주 활용하게 됐다. 하지만 불과 몇달 전만 해도 티스토리 블로그 글편집기에 지도와 관련된 기능이 없었서 지도삽입 자체가 쉽지 않았다. 다행히 지난 업데이트를 통해 티스토리에도 해당 기능이 생기면서, 카카오맵 삽입은 손쉬워졌다.

 

티스토리에 구글맵 삽입방법

 

문제는 카카오맵으로는 해외에 있는 맛집이나 관광지들을 표기할 수 없기 때문에 어쩔 수 없이 구글맵을 삽입해야 된다는 것이다. 당연히 티스토리에도 구글맵 삽입이 가능하다. 다만, 방법 자체만 보면, 살짝 번거롭다는 게 문제다. 최대한 쉽게 원리가 이해되도록 포스팅했으니, 필요한 사람들은 참고하길 바란다.

 

티스토리에 구글맵 삽입방법

일단 구글맵에서 티스토리에 첨부하고 싶은 장소의 주소를 확인한다. 해당 장소를 클릭하면, 아래와 같은 정보를 볼 수 있다. 가장 우측에 있는 공유 아이콘을 선택한다.

 

구글맵 공유기능

 

해당 장소와 관련된 정보가 담긴 링크를 확인할 수 있는 팝업창이 활성화된다. 여기서 링크 보내기 탭 대신에 지도 퍼가기 탭을 누른다.

 

구글맵 지도퍼가기 기능(1)

 

해당 장소의 정보가 담긴 HTML 코드를 확인할 수 있는 새로운 팝업창이 활성화되는데, 우측에 있는 HTML 복사 버튼을 선택한다.

 

구글 지도퍼가기 기능(2)

 

티스토리 블로그 글편집기에서 기본모드 대신 HTML로 수정한 뒤, <p>와 </p> 사이에 해당 코드를 붙여 넣으면, 아래와 같이 구글맵이 블로그에 삽입된 것을 확인할 수 있다. 참고로 아래는 베트남 경제발전의 상징이라 할 수 있는 비텍스코 타워의 주소다.

 

 

이쯤 되면, 2가지 불만이 생길 수 있다. ① PC에서 보면 지도가 좌측정렬된 상태이기 때문에 가운데 정렬시키는 것과 ② 지도의 크기를 내가 원하는 크기로 수정하는 것이다. 둘 다 간단하게 수정할 수 있다.

 

① 지도를 가운데 정렬시키는 방법

기존에 이미 수정한 코드인 <p><iframe ~~~</iframe></p>에서 <p> 대신에 <div align="center">를, </p> 대신에 </div>로 수정한다. 그러면 아래와 같이 지도가 가운데 정렬된 것을 확인할 수 있다.

 

 

② 지도의 크기를 수정하는 방법

삽입한 코드를 자세히 살펴보면, 끝자락쯤에 width="600" height="450"이라고 된 부분이 있다. 너무 크다고 느껴지니, 가로폭은 400, 높이는 300 정도로 수정했다. 참고로 반응형 스킨의 경우, 자동적으로 모바일 크기에 맞춰 지도의 크기가 수정되니, 모바일에서 어떻게 보일지를 고민할 필요는 없다.

 

 

---

 

티스토리 북클럽, 관련글 소개 2줄 만드는 방법 (+쉽다)

<p data-ke-size="size16"> 손쉽게 삭제하는 방법