워드프레스 구글 지도 넣는 방법: 정렬 및 반응형 설정으로 자동 비율 유지

목차 (Contents)

워드프레스는 여러 종류에 지도를 넣을 수 있는 방법들이 존재합니다. 이를테면 네이버, 구글, 카카오 등의 지도를 워드프레스 글쓰기 안에 추가하는 게 가능합니다.

하지만, 네이버 지도와 카카오 지도는 플러그인을 이용해야 하는 방법으로 API등록을 마쳐야 사용이 가능한 번거로움이 발생됩니다.

또한, 5년 이상 업데이트를 한 적도 없는 플러그인이라 대다수 사람들은 사용하지도 알지도 못합니다.

구글 지도는 워드프레스 글 안에 지도를 추가하는 게 간단하고 편리해 많은 사람이 사용하고 있습니다.

플러그인 없이 구글 지도 넣는 게 가능

구글 지도는 공유에 HTML 복사 기능이 기본으로 제공됩니다. 따라서 워드프레스에서 별도로 플러그인 설치하는 수고는 필요 없습니다.

방법은 간단합니다.

검색 포털 사이트에서 ‘구글 지도(구글맵 길찾기)‘를 검색해 구글 맵을 열어줍니다.

검색에 찾고자 하는 주소를 적으면, 왼쪽에 찾은 곳의 자세한 정보들이 나타나게 됩니다.

오른쪽 중간에 위치한 ‘공유’버튼을 클릭 하면, ‘링크 보내기’와 ‘지도 퍼가기’ 두 메뉴가 나오게 되는데, 여기서 ‘지도 퍼가기’를 선택합니다.

지도 화면으로 바뀌면서 ‘HTML 복사’ 링크가 오른쪽 상단에 나타납니다. 이곳을 눌러 코드를 복사해 둡니다.

이제 워드프레스 글쓰기로 돌아와 블록에서 ‘사용자 정의 HTML’을 검색해 추가하고, 그 안에 방금 전 복사해 두었던 ‘HTML’을 붙여 넣으면 끝입니다.

‘미리 보기’ 또는 ‘새 탭에서 미리 보기’를 통해 지도가 정상적으로 등록됐는지 확인해 봅시다.

참고로 ‘미리 보기’보다 ‘새 탭에서 미리 보기’가 더 사실적으로 보여지기 때문에 정확한 확인이 필요할 땐, ‘새 탭에서 미리 보기’ 방식을 선택합니다.

지도 정렬과 반응형 설정으로 모바일 자동 비율 유지 방법

앞서 알려드린 방법은 구글 지도에서 정해준 HTML 코드를 사용해 등록하는 방식이기 때문에 사용자가 원하는 위치나 크기로 나타내기가 어렵습니다.

현재는 정사각형 모양으로 왼쪽 정렬로 보여집니다.

여백 없이 지도를 정렬하고, 모바일에서도 깨지지 않게 잘 보이려면, ‘사용자 정의 HTML’과 ‘추가 CSS’에 코드를 추가하는 작업이 필요합니다.

첫 번째로 아래 HTML 코드를 복사해 ‘추가 CSS’에 붙여 넣어 저장합니다.

/* 반응형 구글 지도 */
.google-map {
  max-width: 800px;
  margin: 0 auto;
}

.google-map iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

‘추가 CSS’는 모양 > 사용자 정의 > 추가 CSS 순으로 찾으시면 됩니다. 준비가 완료되었다면, 글 작성으로 돌아가 ‘사용자 HTML’ 블럭을 추가합니다.

아래 HTML 코드를 복사해 붙여 넣고, ‘이곳을 지우고 구글 지도에서 복사한 코드를 붙여 넣으세요’ 글을 지우고, 구글 지도에서 공유한 HTML 코드를 복사해 넣습니다.

<div class="google-map">
  <이곳을 지우고 구글 지도에서 복사함 코드를 붙여 넣으세요.>
</div>

그러면, 처음 만들었던 지도 모양보다 보기 더 좋고, 모바일에서도 깨지지 않고 잘 출력 됩니다.

미리 보기를 확인해본 결과 지도가 깔끔하게 보여집니다.

마치며: 패턴 설정으로 HTML 코드 자동 입력

지금까지 구글 지도를 워드프레스 본문에 넣는 방법을 알아보았습니다. 다소 수동적인 방법이긴 하지만, 나만의 패턴을 만들어 사용한다면, HTML 코드를 언제든 쉽게 불러와 넣는 게 가능합니다.

코드를 잊어버릴 염려도 없고, 메모장에 적어둘 필요도 없습니다.

매번 똑같은 HTML 코드를 입력해야 하는 경우, 공유 패턴을 만들어 사용하면 쉽고 빠르게 등록이 됩니다.

유연한 패턴 활용은 글 쓰는 작업에 있어 다양하게 효율을 높이는 전략 되기도 합니다.