티스토리 블로그에 네이버 지도, 구글 지도 첨부하기

티스토리 블로그에서는 다음 지도를 첨부할 수 있는 기능을 기본적으로 제공한다.

하지만 네이버 지도, 구글 지도는 별도 작업이 필요하다.

맛집 포스팅 등 지도를 첨부해야 할 일이 있을 때 알아두면 유용하게 사용할 수 있다.

1. 티스토리 블로그에 네이버 지도 첨부하기

① 네이버 지도(map.naver.com)에서 우측에 링크버튼 클릭

② HTML 태그 편집기 및 미리보기 클릭

③ 원하는 크기와 위치 선택

④ HTML 복사하기 클릭

⑤ 티스토리 글쓰기 메뉴 항목에서 '외부컨텐츠' 클릭

⑥ HTML 코드 붙여넣기

⑦ HTML 코드 맨 앞에 <center> 태그 별도 입력

<center> 태그를 입력하는 것은 포스팅에서 지도가 가운데로 정렬되기 위함이니 꼭 챙겨서 입력하자.

2. 티스토리 블로그에 구글 지도 첨부하기

① 구글 지도(map.goolge.com)에서 좌측 공유 버튼 클릭

② 지도 퍼가기 클릭

③ HTML 복사 클릭

④ 티스토리 글쓰기 메뉴 항목에서 '외부컨텐츠' 클릭

⑤ HTML 코드 붙여넣기

⑥ HTML 코드에서 width="XXX"를 찾아 XXX를 100%로 변경 입력

width의 값을 100%로 변경하는 것은 모바일에서 반응형으로 기기의 사이즈에 따라 알아서 최적화 되기 위함이니 꼭 챙겨서 변경하자.  (네이버 지도도 동일하다)

변경 전 예시

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3326.3969079747976!2d126.51995971555843!3d33.51706478075499!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x350ce4a9d5e14011%3A0x2025d5df2e52287f!2z7J287Ya17J2067CY!5e0!3m2!1sko!2skr!4v1525523794643" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

변경 후 예시

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3326.3969079747976!2d126.51995971555843!3d33.51706478075499!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x350ce4a9d5e14011%3A0x2025d5df2e52287f!2z7J287Ya17J2067CY!5e0!3m2!1sko!2skr!4v1525523794643" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>