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

여행 관련 포스팅을 작성하면서 특정 위치 또는 경로 등에 대해 설명할 일이 많다. 또는 회사 홈페이지 만들면서 회사 위치를 웹페이지에 표시할 때 사용할 수 있을 것이다. 이런 경우, 구글지도에서 제공하는 기능을 통해 쉽게 포스팅 내 포함시킬 수 있다. 

◈◈◈◈◈

구글지도 삽입을 위한 예제코드

<iframe src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d40430.65005713678!2d7.1175604830689405!3d50.70295021541639!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e3!4m5!1s0x47bee19f3ae83b3f%3A0x99ff7391067b4bfd!2sBonn+Hbf%2C+Am+Hauptbahnhof+1%2C+53111+Bonn%2C+Germany!3m2!1d50.732307299999995!2d7.0970018999999995!4m5!1s0x47bee5a7550c6fdf%3A0x21864bc632ac797c!2sDrachenfels%2C+K%C3%B6nigswinter%2C+Germany!3m2!1d50.6650948!2d7.2102716!5e0!3m2!1sen!2sfr!4v1520347845393" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

◈◈◈◈◈

1. 구글지도 실행 후, 출발지와 목적지를 각각 입력 후 검색한다. 검색 결과 중 공유하고자 하는 것을 선택한다.

2. 선택한 경로의 상세보기 화면이 나타난다. 아래 이미지의 왼쪽 상단의 Share 아이콘 (프린터 아이콘 왼쪽)을 클릭한다.

3. Share 버튼을 클릭하면 아래와 같은 화면이 나타난다. 

* Share link는 단순히 링크만 공유하는 것이며, 지도 자체를 포스팅에 포함하기 위해서는 Embed map 탭을 선택해야 한다. 

4. Embed map 탭을 선택한 화면이다. 사용할 코드를 복사한다. 

* iframe 코드는 페이지 내 다른 페이지를 불러오는 HTML 코드이다.

구글지도는 티스토리 글쓰기에서 HTML 편집 상태로 지도를 삽입하거나, 외부컨텐츠 기능을 통해 구글지도 삽입이 가능하다. 

외부컨텐츠 기능을 이용하여 구글지도 삽입하기

5. 티스토리 글쓰기 기능 중 '외부컨텐츠'를 클릭한다. 

6. 외부컨텐츠 삽입 화면의 '소스입력'에 구글지도에서 복사한 코드를 붙여넣기 한다.

7. 외부컨텐츠로 구글지도 삽입한 결과

◈◈◈◈◈

HTML 편집하여 구글지도 삽입하기

5. 티스토리 글쓰기 시 □HTML을 선택한 후, 코드를 삽입할 위치를 결정한다. 지도의 정렬 위치에 따라 아래 코드를 변경해야 한다. 또는 미리보기 에디터 상태에서 지도를 선택(지도가 파란색이 됨)하고 티스토리 글쓰기 기능에서 제공하는 정렬 버튼을 클릭하여 정렬 상태를 변경할 수 있다.

* 코드 삽입 전에 있는 코드 <p style="text-align: center;"><br /></p>에서 <br />를 지우고 이 자리에 iframe 코드를 붙여넣기 한다.

* "text-align: center;"에서 center는 중앙 정렬, left는 왼쪽 정렬, right은 오른쪽 정렬 시켜준다.

6. 본문에 구글지도에서 복사한 iframe 코드 전체를 붙여넣기 한다.

7. 에디터 타입의 □HTML 체크를 해제하면 미리보기 형태로 지도 삽입이 된 것을 바로 확인할 수 있다.

8. 티스토리 포스팅에 구글지도 삽입한 예제 화면이다.

---

관련 글 보기

2018/05/27 - [♥ 컴퓨터/스내파] - 스내파 회원가입 하는 방법 - 쉬운 SNS 이미지 만들기

2018/05/28 - [♥ 블로깅팁] - 단축 URL 만들기 - bitly