티스토리 블로그에 외부 지도 삽입하기 (네이버, 구글 지도)

티스토리 블로그에 글을 쓸 때 네이버 지도나 구글 지도 같은 외부 지도를 삽입하는 방법입니다.

 

https://tspace.tistory.com/124

△ 티스토리 에디터 지도 기능 사용법

 

티스토리 에디터도 지도 기능을 제공하지만 다음(카카오) 지도 만 사용이 가능합니다.

다음(카카오) 지도에서 내가 원하는 지역이 제대로 표시 안 되거나 특정 지역이 갱신이 안되서 예전 지도를 표시하는 경우 제대로 표시되는 다른 지도를 사용하면 좋습니다.

 

삽입 가능한 외부 지도는 지도를 공유하는 서비스를 제공하는 곳이면 아무 곳이나 가능합니다.

여기서는 네이버와 구글 지도를 삽입하는 방법을 소개합니다.

 

 

※ 네이버 지도 삽입

 

https://map.naver.com/
△ 네이버 지도

 

 

네이버 지도에서 원하는 지역을 검색한 후  오른쪽 아래 있는 퀵 메뉴중에 "URL 복사"를 클릭합니다.

 

 

지도를 공유할 수 있는 주소들이 나옵니다.

기본 값의 지도를 사용하려면 HTML 태그 복사의 "복사"를 클릭합니다.

지도 크기를 변경해서 사용하려면 "HTML 태그 편집기 및 미리보기" 를 클릭합니다.

 

 

HTML 태그 편집기 및 미리보기를 클릭했을 때 나오는 창입니다.

지도의 크기와 보이는 영역을 지정한 후 "HTML 복사하기"를 클릭합니다. 

 

 

실제 html 소스 내용이 나옵니다.

"복사"를 클릭합니다. 

 

 

티스토리 에디터에서 "외부 컨텐츠"를 클릭합니다.

 

 

외부 콘텐츠 삽입 창이 열립니다.

html(embed, object 소스입력) 항목에 위에 복사한 소스를 붙여 넣기 합니다.

확인을 클릭합니다.

 

 

티스토리 에디터에 네이버 지도가 삽입된 모습입니다.

 

 

※ 구글 지도 삽입

 

https://www.google.com/maps/?hl=ko
△ 구글 지도

 

 

구글 지도에서 원하는 지역을 검색한 후 공유를 클릭합니다.

 

 

지도 퍼가기 탭으로 이동합니다.

"HTML 복사"를 클릭해서 html 소스를 복사합니다.

 

 

네이버 때와 같은 방법으로 외부 콘텐츠 삽입 기능을 사용해서 html 소스를 입력해 줍니다.

 

 

구글 지도가 첨부된 화면입니다.

에디터에서는 흰 영역으로만 표시가 됐는데 미리 보기 시에는 정상적으로 출력이 됩니다. 

 

네이버나 구글 이외에 다른 곳이라도 지도의 HTML 소스를 제공하는 곳이라면 외부 콘텐츠 삽입 기능을 사용해서 지도를 첨부할 수 있습니다.