티스토리에 구글지도 삽입하기


티스토리에 구글지도 삽입하기


티스토리 블로그에 포스팅을 하다보면 지도를 삽입하고 싶을 때가 있습니다.

그래서 지난번 두차례에 걸쳐 다음지도와 네이버지도를 티스토리에 삽입하는 것을 알아봤는데요.


2018/07/03 - [블로그팁 Tistory] - 티스토리에 다음 지도 초간단 삽입하기

2018/07/02 - [블로그팁 Tistory] - 티스토리에 네이버 지도 삽입하기

이번엔 구글 지도를 삽입 하는 것을 알아보려합니다.

맛집 블로그나, 국내여행지 블로그 할 때는 네이버지도와 다음지도만으로도 충분히 위치를 표시 할 수 있습니다.


그러나 해외여행 포스팅에는 다음지도와 네이버지도로는 표시가 안됩니다.ㅠ

그럴때 바로 구글 지도를 쓰는 것이지요 :)


티스토리에 구글지도 삽입하기


그럼 지금부터 구글지도를 티스토리 블로그에 삽입하는 방법을 알려드릴게요 :)


1. 먼저 구글 지도(https://www.google.com/maps)에 접속을 합니다.

2. 그리고 구글지도에서 찾고자하는 장소를 검색합니다. 저는 지난 유럽여행 때 맛있게 먹은 알베로벨로 맛집 'Ristorante Il Trullo Antico'를 검색해 볼게요.

3. 검색이 된 장소를 선택하면 좌측에 메뉴 중 '공유'라는 버튼을 클릭합니다.


구글지도에서 검색


4. 공유 창이 뜨면 '링크보내기' 화면이 뜨는데, 이 때 옆에 '지도퍼가기'를 클릭합니다.


구글 지도 퍼가기


5. 지도퍼가기에서 바로 'html복사'해도 되지만, 사이즈 조절을 위해 '중간'이라고 되어있는 버튼을 누릅니다.

6. 그리고 하단에 '맞춤크기'를 클릭합니다.


티스토리에 구글지도 삽입하기티스토리에 구글지도 삽입하기


7. 저는 800X 400 사이즈로 입력했습니다. 취향에 맞게 사이즈를 입력해보세요. 그뒤 'HTML복사'버튼을 누릅니다.

   참고로 모바일에서는 자동으로 가로 사이즈가 조정이 되니 PC화면만 신경써서 조정하면 됩니다.

8. 티스토리에 지도를 붙이기 전까지 CNTR+X, CNTR+C를 누르지 마세요. 정보가 날아가요.ㅠ


티스토리에 구글지도 삽입하기



9. 티스토리 블로그 글쓰기 상단 메뉴중 '외부컨텐츠'를 클릭합니다.

   HTML에 자신있다면 바로 HTML 창으로 넘어가 붙여도 됩니다. :)


티스토리에 구글지도 삽입하기


10. 외부컨텐츠 삽입 창 뜨면 빈 글상자에 지도를 가운데 정렬하기 위해 <CENTER></CENTER>를 먼저 작성해 주세요.

11. 그 이후 <CENTER></CENTER> 사이에 ><중간쪽에 마우스 커서를 넣고 CNTR+V를 누르면 지도 정보가 붙여넣어 집니다.


티스토리에 구글지도 삽입하기티스토리에 구글지도 삽입하기


12. 확인을 누르고 나오면 구글 지도 붙이기 완성!!


티스토리에 구글지도 삽입하기


13. 발행한 상태로 보면 구글지도는 아래와 같이 삽입됩니다. :)


티스토리에 구글지도 삽입하기 PC ver.
티스토리에 구글지도 삽입하기 PC ver.



티스토리에 구글지도 삽입하기 모바일ver,
티스토리에 구글지도 삽입하기 모바일ver.





구글지도 넣기 완성


네이버지도와 다음지도 넣기에 이어, 구글지도 넣기도 해봤는데요. 다음지도, 구글지도 네이버지도 순으로 지도 삽입방법이 간단했네요.

특히 구글지도는 모바일에서 자동조정이 되니 편한거 같기도 하구요.

그럼 이제 포스팅할때 각종지도 맘에 드는 것으로 넣어보세요 :)



이 포스트가 공감되거나 도움이 되셨다면 '공감'버튼을 눌러주세요.

덧글을 남겨주셔도 큰 힘이 됩니다. :)