내 사이트(티스토리 블로그)에 구글맵(지도) 넣는 방법

오늘은 티스토리 블로그에 처음 입문하시는 분을 위해 블로그 글쓰기 에디터에서 구글 지도 삽입하는 팁을 번호를 붙여가며 알아 보도록 하겠습니다.

구글맵 바로가기 ☞https://www.google.co.kr/maps

1.

블로그에서 글을 쓰다가 본문에 구글 지도를 넣을일이 있다면 위에 링크된 구글맵 페이지로 들어가 공유하고 싶은 위치를 왼쪽 상단 검색창에 입력하고 엔터키를 누릅니다.

그러면 페이지 오른쪽에는 입력한 해당 위치가 로드되면서 거리 지도로 표시되며, 왼쪽 위치 검색창 아래에는 메뉴들이 생성되는데요.

공유 버튼을 누릅니다.

2.

팝업창이 링크 공유 탭으로 열리는데요. 지도 퍼가기 탭을 누르면 공유 코드가 아이프레임 소스코드로 제공됩니다.

그런데 지도 퍼가기에는 여러가지 옵션을 사용할 수 있는데요.

먼저 공유 코드 왼쪽 중간으로 되어있는 드롭 다운 버튼을 눌러 메뉴를 펼쳐 볼까요?

펼쳐진 메뉴를 보면 작게(400x300), 중간(600x450), 크게(800x600), 또는 맞춤 크기로 퍼갈 수 있네요.

3.

저는 맟춤 크기를 선택해서 제 블로그 본문 넓이에 최적화된 700x500으로 퍼가려고 하는데요.

맞춤크기를 선택하면 실제 크기를 미리 볼 수도 있구요.

4.

지도 퍼가기에서 어떤 크기를 선택하든 공유 코드를 블록 설정해서 복사( Ctrl + C )하면 구글맵 페이지에서 할일은 끝난 거고, 블로그로 이동해서 퍼온 공유 코드를 붙여넣기만 하면되는데요.

5.

블로그로 가기전 다른 옵션도 알아 보도록 하죠.

구글 지도 퍼가기는 거리 지도 모드뿐만 아니라 위성 사진 모드, 위치를 확대하거나 축소해 퍼갈 수도 있습니다.

방법은 간단한데요.

거리 지도 모드에서 위성 사진 모드로 퍼가고 싶다면 1 왼쪽 아래 위성 이미지 배너 아이콘을 누른 후 위성 사진 모드로 전환되면 오른쪽 아래  ┼ 버튼이나  ─ 버튼을 누르면 지도의 위치를 확대하거나 축소할 수 있구요.

2 위치 검색 메뉴의 공유 버튼을 눌러 지도 크기를 지정해서 공유 소스 코드를 복사하면 됩니다.

6.

이제 복사된 공유 코드를 블로그 본문 글쓰기에서 넣고싶은 구간에 첨부만 하면 되는데요.

어떤 분의 글을 보니 HTML에 체크하고 삽입하는 방법으로 포스팅한 글을 본적이 있었는데, 티스토리 에디터에는 훌륭한 부가 기능들이 많아 굳이 HTML 모드에 체크하지 않아도 외부컨텐츠 탭을 이용하면 아주 손쉽게 구글 지도가 첨부됩니다.

7.

외부컨텐츠 탭을 누르면 팝업창이 html에 체크된 상태로 열리는데요.

소스입력란에 구글맵 페이지에서 복사된 공유 코드를 붙여넣기( Ctrl + V )하고 확인 버튼을 누르면 본문 내용 원하는 구간에 구글 지도가 적용되며, 곧바로 표시됩니다.

어떤가요?

티스토리 블로그에 구글 지도 넣는 방법 아주 간단하지요?

방문해 주셔서 감사합니다.

외부켄텐츠 기능으로 첨부된 예시 구글 위성 지도