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

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

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

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

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

 

 

구글 지도 넣기

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

 

 

"지도 퍼가기" 탭 클릭

 

 

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>