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

티스토리 블로그에 지도를 넣는 방법에 대해서 소개합니다.

 

1.  장소 검색 

구글 지도에서 삽입하고자 하는 장소를 검색합니다.

예시로 Atlantis The Royal Dubai 호텔을 검색합니다.

 

 

2. HTML 코드 복사

html 코드 복사를 위해서 '공유(Share)' 버튼을 클릭합니다.

'공유(Share)' 버튼을 클릭하면 '링크 보내기(Send a link)'와 '지도 퍼가기(Embed a map)' 2가지 탭이 나타납니다.

우리는 블로그에 지도를 삽입하는 것이 목적이기 때문에 '지도 퍼가기(Embed a map)'을 선택합니다.

그리고 'COPY HTML'를 클릭하여  html 코드를 복사합니다.

 

 

 

3. HTML 붙여 넣기

티스토리 편집 모드를 [기본 모드]에서 [HTML] 모드로 변경합니다.

 

복사했던 html 코드를 삽입하고자하는 위치에 붙여 넣습니다.

마지막으로 붙여 넣기 한 html 코드 앞뒤로 <center>, </center> 코드를 넣습니다.

삽입하는 지도의 크기를 조정하기 위해서는 width="600" height="450"를 수정하면 됩니다.

 

 

편집 모드를 [HTML] 모드에서 [기본 모드]로 변경하면 지도가 삽입되어 있음을 알 수 있습니다.

삽입된 지도의 경우 회색의 테두리가 나타남을 볼 수가 있습니다.

 

 

4. 테두리 제거하기

삽인한 지도 주변에 나타는 회색 테두리 제거를 위해서 html 코드를 수정합니다.

frameborder="0"와  style="border:0"을 아래와 같이 추가합니다.

 

 

아래와 같이 회색 테두리가 사라졌음을 알 수가 있습니다.

 

 

오늘은 티스토리 블로그에서 구글 지도를 삽입하는 방법에 대해서 알아보았습니다. 

 

 

댓글

Designed by JB FACTORY