티스토리 블로그에 지도 넣기
블로그에 글을 작성하다 보면 내용에 따라서 지도를 첨부하면 더 좋지 않을까 하는 생각을 하게 된다.
특히 맛집이나 여행과 관련된 블로그를 하는 사람이라면 글 내용에 상당히 도움이 되기 때문에 어찌 보면 필수라고도 할 수 있는데 보통 사람들이 많이 사용하는 지도는 구글, 네이버, 다음 이 세 곳의 지도를 많이 사용하지 않을까 한다.
이 중에서 자신의 블로그의 분위기에 맞거나, 개인적으로 생각하는 좋은 지도를 골라서 사용하면 되는데 방법은 그리 어렵지 않다.
구글 지도 넣기
우선 구글 지도에 접속해서 블로그 글에 넣고자 하는 주소를 검색하고 검색한 결과가 나오면 공유를 클릭하도록 하자.
만약 검색한 결과가 여러 가지가 나오면 본인이 검색하고자 하는 주소를 클릭해야 공유 버튼이 나타난다.
공유를 클릭하면 조그마한 창이 나타나는데 상단의 탭 중 '지도 퍼가기'를 클릭하고 나타나는 iframe 링크를 복사하도록 하자.
이제 복사한 링크를 붙여 넣으면 되는데 우선 글쓰기 상단에 있는 메뉴 중 외부 컨텐츠를 클릭하도록 하자.
외부 컨텐츠 창이 나타나면 소스 입력 부분에 방금 전 복사했던 링크를 붙여 넣고 확인을 클릭하도록 하자.
그러면 글에 구글 지도를 넣을 수 있을 것이다.
참고로 복사해서 넣는 iframe의 크기는 기본적으로 400px나 600px로 정해져 있기 때문에 모바일로 볼 때 지도가 커서 화면서 잘릴 수 있으니 width 부분의 값을 모바일 화면에 맞게 설정하거나 width="100%"로 변경하여 화면 크기에 맞춰 변하게(반응형) 해주는 것이 좋다.
그렇게 첨부한 구글지도.
네이버 지도 넣기
방법은 구글 지도와 크게 다르지 않다.
네이버 지도에 접속해서 마찬가지로 글에 넣고자 하는 주소를 검색한 뒤 오른쪽의 링크 버튼을 클릭하도록 하자.
(오른쪽에 작은 아이콘 모양으로 되어있다.)
링크 버튼을 클릭하면 URL 복사와 HTML 태그 복사가 나타나는데 태그 복사를 하도록 하자.
복사를 했으면 이제 외부 컨텐츠의 소스 부분에 붙여 넣기를 하고 확인을 하면 된다.
참고로 네이버 지도 역시 그냥 넣게 되면 지도가 크기가 고정되어 있어 지도보다 화면이 작아진다면 그대로 잘리게 된다.
따라서 이를 방지하려면 복사한 코드에서 width를 찾아 제일 처음에 나오는 부분은 그냥 삭제해 버리고 두 번째 나오는 width의 값을 width="100%"로 변경하면 된다.
첨부된 네이버 지도
|
다음 지도 넣기
티스토리 블로그가 다음과 연관이 있다 보니 따로 지도 페이지를 방문할 필요 없이 글쓰기에서 바로 지도를 불러올 수 있다.
우선 글쓰기 메뉴 중 지도를 클릭하도록 하자.
지도 첨부 창이 나타나면 원하는 주소를 찾아서 클릭하면 위치가 표시되고 바로 첨부를 클릭하면 지도 넣기는 쉽게 할 수 있다.
첨부된 다음 지도.