막상 알고보면 별것 없는 것처럼 느껴지는 것이 세상사이기는 하죠.

요 요즘 사이 포스팅을 작성하는데 구글맵 이 자꾸 왼쪽으로 나타나 굉장히 거슬렸습니다. 나중에 최종 세팅하면 그때 구글맵 정렬도 제대로 세팅하자고 마음먹기는 했는데 계속 스트레스스 주어서 오늘 방안을 찾아보고야 말았습니다.

알고 보니 정말 간단한 것이드라구요.

아시다시피 구텐베르그에서 구글맵 삽입은 사용자정의 HTML로 삽입됩니다. 그 HTML 코드를 살펴보면 <iframe>을 사용하는 것을 알게 됩니다. 그러면 <iframe> 정렬 방법을 사용하면 되겠죠.

기본으로 왼쪽 정렬되는 구글맵

구텐베르그에서는 기본으로 왼쪽 정렬을 합니다. 그렇기에 아무런 조처없이 구글맵을 삽입하면 왼쪽으로 정렬되어 테마 세팅에 따라 달라지겠지만 아래 이미지처럼 끔찍한 상황에 처하게 됩니다.

iframe 정렬 방법

위에서 설명했듯이 구글맵 삽입은 <iframe>을 사용하기 때문에 <iframe> 정렬 방법을 적용하면 됩니다.

기본 <iframe> 정렬 방법은 아래와 같습니다. 가운데로 정렬합니다.

<iframe src="/default.asp" width="200" height="200" align="center">
</iframe>

그렇기 때문에 구글맵 삽입 코드에서는 아래와 같은 코드를 사용하게 됩니다.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31401.036609889143!2d103.83479825279767!3d10.331513952900668!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31081f8407e4abe5%3A0x7aa0f6f030e4218!2z67mI7Y6E66as7KGw7Yq4!5e0!3m2!1sen!2skr!4v1574606135877!5m2!1sen!2skr" width="100%" height="600" align="center" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

아래는 실제로 위 코드를 사용해 구글맵을 워드프레스의 구템베르그 편집기에서 삽입한 모습니다.