[블로그, HTML] 1. 티스토리에 구글 맵 첨부하는 방법(기본 첨부편)

어떻게 하는거임????

 

해외여행 여행기를 쓰다 보면, 특정 장소의 위치를 보여드리고 싶을 때가 많습니다. 네이버 블로그에서는 구글맵과 연동되는 도구를 제공하지만, 티스토리에서는 다음맵을 통한 국내 지도만 첨부가 가능합니다. 해외 지도를 첨부하려면, 구글맵에서 HTML 모드로 옮겨와야 하죠....

 

어려워 보이나요?

하지만! 알고 나면 구글맵을 첨부₁하는 것은 정말 쉽습니다.

또한 크기 조절을 통해 모바일에 최적화₂ 하는 법,

그리고 스트리트 뷰 를 첨부₃하는 법까지 확실하게 알려드리겠습니다.

 

시작합니다.

 

---

 

마드리드 왕궁, 구글 맵

 

가장 먼저 원하는 장소를 구글맵으로 검색합니다. 제가 검색한 마드리드 왕궁의 구글맵 검색 결과입니다. 물론 이런 식으로 스크린샷을 찍어서 제공하는 것도 좋습니다.

 

하지만 블로그 방문자가 그곳에 직접 방문했다면, 스크린샷 지도로 자신의 위치도 목적지의 위치도 가늠하기 어렵습니다. 확대나 방위 조절이 안 되기 때문이죠. 클릭 한 번으로 구글맵을 열 수 있다면 얼마나 좋을까요?

 

구글맵을 첨부하기 위해선 5단계만 따라 하시면 됩니다!

 

1. 구글맵 사이드 바에서 공유 버튼을 누른다!

1. 공유버튼을 클릭합니다.

 

---

 

2. 팝업 된 공유창에서 지도 퍼가기 버튼을 누른다!

2. 지도 퍼가기 버튼을 클릭합니다.

 

---

 

3. HTML 복사 버튼을 누른다!

3. HTML 복사 버튼을 클릭합니다.

 

---

 

4. 티스토리 글쓰기 도구 창에서 기본 모드를 HTML모드로 바꾼다!

4. HTML 모드로 변경합니다.

 

---

 

5. 빈 공간에 붙여 넣기(Ctrl + v) 한다!

HTML 빈 공간

5. 구글맵 주소를 붙여넣기 합니다.

 

---

 

5줄 요약. 

1. 공유 누르기

2. 지도 퍼가기 누르기

3. HTML 복사 누르기

4. 티스토리 HTML 모드 바꾸기

5. 붙여넣기

 

---

 

 

짜잔! 구글맵을 첨부했습니다.

 

PC와 모바일 모두에서 확대 축소와 이동까지 가능합니다. 큰 지도 보기를 누르면, 구글맵 인터넷 창이 뜨거나 구글맵 애플리케이션으로 바로 연결됩니다.

 

그런데

왜 왼쪽 정렬로 고정되어 있죠?

왜 엔터키가 안 먹히는 걸까요?

왜 크기는 왜 이렇게 작나요?

왜 모바일에선 찌그러져 보이나요?

 

2편 - 크기 조절 및 모바일 최적화 편을 참고해주세요. ↓↓↓

[블로그, HTML] 티스토리에 구글 맵 첨부하는 방법 - 2 (크기 조절, 모바일 최적화, 가운데정렬, 시��