숩in/티스토리 :: 숩in

[[티스토리]] 블로그에 해외위치 넣기 (feat. 구글맵, html 이용)

숩ing 2023. 12. 10. 22:28
728x90

🤦🏻‍♀️ 들어가기 전에..

1년에 한 번씩 해외여행을 가고
여행을 티스토리에 기록하기 위해
블로그를 시작했는데,,

이게 왠걸
동유럽 신혼여행 포스팅 중
티스토리 지도첨부를 이용해서
해외 위치를 찍으려고 했는데


검색결과가 없습니다


카카오맵 api를 사용하는 티스토리는
해외위치를 검색하면
결과가 없다고 나온다.🥲

그래서 해외위치를 지도에 찍어서
첨부할 수 있는 방법을 찾아봤는데
티스토리의 html 편집을 이용
구글맵을 손쉽게 첨부하는 방법을 찾았다.



티스토리에 구글맵 첨부하기

먼저 구글맵을 첨부하기 전에
평상시와 똑같이 티스토리 글쓰기를 통해
새로운 포스팅을 만들어 줍니다.

 

1. 글을 작성하고 지도 위치 표시하기

그 다음 제목과 글을 작성하고
해외 위치 지도를 첨부할 자리
자신만이 알 수 있는 방법으로
자리를 표시합니다.
(저는 지도 첨부할 자리라고 표시했어요)



글을 작성하고 첨부할 위치 표시하기



2. 구글맵에서 해외 지도 가져오기

구글맵으로 접속해서
(구글맵 링크 https://www.google.co.kr/maps/?hl=ko)
첨부하고 싶은 해외 위치를 검색합니다.


구글맵 위치 검색



구글맵에 원하는 위치를 검색하면
공유라는 버튼이 있는데
이걸 클릭한다.


구글맵 지도 공유



공유 버튼을 클릭하면
위와 같이 링크 보내기와
지도 퍼가기가 가능한데
여기서 지도 퍼가기를 클릭한다.


지도 퍼가기 html 복사



지도 퍼가기에선 구글맵 지도를
html 형태로 제공을 해준다.

오른쪽 HTML 복사를 클릭하면
해당 지도 이미지를
html 형태로 복사할 수 있다.

HTML 복사 클릭.

 

3. 티스토리에 구글맵 넣기

다시 아까 작성하고 있던
티스토리로 돌아와서


HTML 편집 버전으로 들어가기



오른쪽 상단에 보면
편집 모드를 변경할 수 있는데
HTML을 클릭해서
HTML 편집모드로 들어가 준다.


HTML 편집 모드



그럼 이렇게 우리가 작성한 글이
HTML 형태로 편집할 수 있도록
제공이 된다.

우리는 아까 복사했던 구글맵 HTML을
원하는 자리에 넣어야 하기 때문에
(지도 첨부할 자리) 텍스트가 포함되어 있는
<p></p>태그 줄 전체를 선택한다.
(html에서 <p>태그는 문단을 뜻함.)

그 다음 우클릭해서 붙여넣기 하거나
Ctrl + V 를 클릭해서
복사해 온 구글맵 html을 붙여준다.


구글맵 html 붙여넣기



다시 편집모드를 HTML에서
기본모드로 돌아가면


구글맵이 잘 들어간 걸 볼 수 있다



위와 같이 구글맵이 잘 들어간 걸 볼 수 있다.
아주 NICE!! 😃👍



🙌 마치면서..

앞으로도 해외여행 할 일이 많아질텐데
구글맵 html 첨부를 유용하게 사용해서
더 많은 해외여행 정보를 공유할 수 있을 것 같당.

궁금한 점이 있다면
댓글이나 메일 보내주시면
아는 범위 내에서 
성심성의껏 답변해 드릴테니

많관부~🫶

728x90