본문 바로가기
Tistory 운영

[티스토리] 구글 지도 넣는 방법

by 까망 하르방 2023. 12. 5.
반응형

티스토리 구글 지도 넣는 방법

국내는 "Daum 지도"를 삽입하면 되지만

해외는 구글 지도가 유용한 편이다.

그래서 해외 관련 포스팅할 때는 구글 지도를 삽입하고 싶은 경우가 있다.

 

 

구글 지도 넣기

구글맵에서 위치 검색 후 "공유" 클릭

구글맵 넣는 방법

 

 

"지도 퍼가기" 탭 클릭

구글맵 넣는 방법 지도 퍼가기

 

 

HTML 문구를 복사하기 위해 "HTML 복사" 클릭

구글맵 넣는 방법 HTML 복사

 

 

티스토리 글쓰기에서 [HTML] 모드로 전환

구글맵 넣는 방법 HTML 모드 전환

 

 

원하는 위치에 HTML 문구 삽입

구글맵 넣는 방법 HTML 문구 삽입


결과

 

 

가운데 정렬

좌우 간격에 맞춰 가운데 정렬을 하고자 한다면

<div align="center"> ... </div>로 HTML 문구 양끝을 감싸준다.

 

<div align="center"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3163.1651084842324!2d126.98565167714848!3d37.55117362500677!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca257a88e6aa9%3A0x5cf8577c2e7982a5!2zTuyEnOyauO2DgOybjA!5e0!3m2!1sko!2skr!4v1701730218011!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>

 

 

 

크기 수정

중간에 "width"와 "height" 속성 값 수치를 바꿔준다.
 
<div aligh="center"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3163.1651084842324!2d126.98565167714848!3d37.55117362500677!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca257a88e6aa9%3A0x5cf8577c2e7982a5!2zTuyEnOyauO2DgOybjA!5e0!3m2!1sko!2skr!4v1701730218011!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>

 

반응형

댓글