구글 맵 Google Map 티스토리 글 작성시 본문에 삽입하는 방법

 

환경: Chrome

 

여행을 다녀 온 후 체험기를 쓸 때 본문에 지역 지도를 삽입합니다. 네이버 맵은 국내용이기 때문에 해외 여행을 갔다 왔다면 사용할 수 없습니다. 전 세계를 대상으로 맵을 추가하고 싶다면 구글 맵을 사용해야 합니다. 어렵지 않게 티스토리 본문에 삽입할 수 있습니다. 

 

지도에서 추가하고 싶은 지도의 위치로 이동합니다. 그리고 지도를 마우스로 클릭하면 스핀 아이콘이 표시가 됩니다. 왼쪽 상단 검색창에는 아이콘의 위치에 지역 이름이 나타납니다. 자신이 찾는 위치가 맞다면 왼쪽에 더보기 메뉴 목록 아이콘을 클릭합니다. 

구글 맵 Google Map 티스토리 글 작성시 본문에 삽입하는 방법

 

 메뉴 목록에서 [지도 공유 또는 퍼가기] 을 클릭합니다. 

구글 맵 Google Map 티스토리 글 작성시 본문에 삽입하는 방법

 

▼ 화면에는 지도를 퍼 갈 수 있는 팝업창이 나타납니다. [지도 퍼가기] 탭으로 이동합니다. 화면 상단에 iframe 소스를 제공하는데, 티스토리 본문에서 사용할 지도 주소입니다. iframe 소스를 복사합니다

구글 맵 Google Map 티스토리 글 작성시 본문에 삽입하는 방법

 

티스토리 블로그로 와서 지도를 삽입하기 위해 글 작성을 누릅니다. 그리고 글 작성을 위한 에디터 창 오른쪽 끝에 [HTML] 을 체크합니다. 그럼 HTML 소스를 입력할 수 있는 창으로 전환됩니다.

구글 맵 Google Map 티스토리 글 작성시 본문에 삽입하는 방법

 

 그림처럼 HTML 로 전환된 상태에서 iframe 소스를 붙여 넣습니다. 그렇지 않으면 지도나 나타나지 않습니다. 다시 오른쪽 상단에 HTML 체크를 해제하면 소스가 아닌 지도를 볼 수 있습니다.

구글 맵 Google Map 티스토리 글 작성시 본문에 삽입하는 방법

 

 그림은 지도 주소를 넣어서 완성한 모습입니다. HTML 입력란에 익숙치 않으신 분들은 내용을 입력하고 HTML 을 체크해서 소스를 제일 아래에 붙여 넣습니다. 그리고 HTML 을 해제한 후 다시 글을 작성해서 완성하세요. 

구글 맵 Google Map 티스토리 글 작성시 본문에 삽입하는 방법

Posted by 녹두장군