워드프레스 홈페이지에 지도넣는 방법 정리

워드프레스 블로그를 운영하다보면 페이지에 지도를 넣어줘야 할 경우가 생깁니다. 사업장의 주소라던지, 특정 장소 정보를 태그하기 위해서 지도만 한 것이 없죠? 오늘은 어떻게 워드프레스에 깔끔하게 지도를 넣을 수 있는지 알아보도록 하겠습니다.

👇워플 추천 영상👇

워드프레스 홈페이지 지도넣는 법

워드프레스에 지도를 넣는 방법은 여러가지가 있습니다. 정리를 해보면 대표적인 지도앱은 다음의 세가지로 추릴 수 있겠습니다.

구글 맵
네이버 맵
카카오 맵

각 서비스는 특정 장소에 대한 정보들을 나타내는 공유 기능을 가지고 있습니다. 이 포스팅에서는 구글 맵을 통해서 넣는 방법을 설명드리겠습니다.

지도 넣는 방법 추천

지도는 각 테마 블록에서 제공하는 지도 블록을 이용해서 넣을 수 있고, 혹은 직접 임베드 기능을 통해서 넣을 수 있습니다. 미리 디자인 된 지도 블록을 사용하면 좀 더 예쁘게 넣을 수 있습니다.

그러나, 지도 블록을 쓰는 것이 은근 신경쓸게 많고, 간혹 버전이 안맞아 페이지에 표시가 잘 안되는 경우도 있어서 결국 시간이 많이 들어가긴 하더군요.

제가 추천드리는 방법은 그냥 지도 임베드 기능을 통해서 넣는 것입니다.

지도 넣는 방법 설명

지도를 넣는 방법은 크게 2단계로 이루어 집니다.

홈페이지에 지도 넣을 공간 마련하기
임베디드 지도 정보 가져오기

먼저 홈페이지 지도 넣을 공간을 만들어 봅시다.

지도 넣을 공간 마련하기

지도를 넣기 전에 어떤 공간에 넣어야 할 지 결정하고 공간을 만들어야 합니다. 저는 2단을 사용해서 아래처럼 지도 넣는 것을 설명해드리도록 하겠습니다.

광화문 지도 넣는 예제

광화문은 현재 12 Hyoja-ro, Jongno-gu, Seoul, South Korea 위치해 있습니다.

오른쪽에 광화문에 해당하는 지도 정보가 위치해 있습니다.

2단 공간 마련하기

가장 처음 설정해줘야 하는 것은 Row Layout으로 2단 칼럼을 잡아줍니다.

슬래쉬 입력 후, row layout 검색

생성 된 2개의 각 칼럼을 단락으로 바꿉니다. 그 상태에서 단락 안에 커서를 놓고, 왼쪽 섹션에는 글자를, 오른쪽 섹션에는 커스텀 HTML 블록을 검색하여 넣어줍니다.

오른쪽에 커서를 위치하고 ‘슬래쉬(/) html’로 검색하면 아래 그림과 같이 사용자 정의 HTML이 나옵니다.

구글맵 임베디드 지도 코드 가져오기

예제로 사용 할 광화문을 구글에서 검색해서 광화문 구글 맵 페이지를 불러옵니다.

광화문 카드 오른쪽 하단에 보이는 Share 버튼을 누르면 해당 장소를 어떤 방식으로 공유할 지 선택하는 화면이 나옵니다. (아래 그림 클릭 시 큰 화면으로 볼 수 있음)

Embed a map 이라는 섹션을 선택합니다. 그 다음, 왼쪽에 보이는 small 부분을 선택해서 알맞은 크기를 선택한 다음 오른편의 Copy Html 버튼을 누르면 다음과 같은 iframe 코드가 복사됩니다.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.1163783927063!2d126.97423717507674!3d37.57587717203614!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca37454f683b1%3A0xfa19c5217c6a0bc0!2sGwanghwamun%20Gate!5e0!3m2!1sen!2sus!4v1714241263073!5m2!1sen!2sus" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

iframe은 특정 웹사이트 정보를 다른 웹사이트 안에 넣어줄 때 사용하는 임베디드 코드라고 생각하면 쉽습니다. 위 코드를 앞에서 만들어놓은 사용자 정의 HTML 공간에 넣어주면 끝입니다!