워드프레스에서 구글 지도 쉽게 삽입하는 방법 (HTML 활용)

워드프레스에서 구글 지도 쉽게 삽입하는 방법 (HTML 활용)

워드프레스에서 구글 지도를 삽입하는 방법은 매우 간단합니다. 별도의 플러그인 없이, 구글 지도에서 제공하는 “지도 퍼가기” 기능을 활용하여 HTML 코드만 삽입하면 됩니다. 이 방법을 사용하면 방문자에게 특정 위치를 쉽게 안내할 수 있습니다.

1. 구글 지도에서 “지도 퍼가기” 코드 가져오기

  1. 구글 지도에 접속합니다.
  2. 검색창에서 원하는 위치(예: 회사, 매장, 특정 장소)를 검색합니다.
  3. 지도 좌측 상단의 공유 버튼을 클릭합니다.
  4. “지도 퍼가기” 탭을 선택한 후, “HTML 복사” 버튼을 클릭하여 코드를 복사합니다.
구글 지도에서 "지도 퍼가기" 코드를 복사합니다.

2. 워드프레스에서 구글 지도 삽입하기

1) 사용자 정의 HTML 블록을 활용하는 방법

  1. 워드프레스 관리자 페이지에서 페이지 또는 글 작성 화면으로 이동합니다.
  2. “+” 버튼을 클릭하여 “사용자 정의 HTML” 블록을 추가합니다.
  3. 앞서 구글 지도에서 복사한 HTML 코드를 붙여넣습니다.
  4. 미리보기를 클릭하여 지도가 정상적으로 표시되는지 확인한 후, 게시합니다.
워드프레스에서 사용자 정의 HTML 블록을 활용하여 구글 지도를 삽입합니다.

2) HTML 편집기에서 직접 삽입하는 방법

  1. 페이지 또는 글을 편집할 때, 텍스트(HTML) 편집 모드로 전환합니다.
  2. 적절한 위치에 구글 지도에서 복사한 iframe 코드를 붙여넣습니다.
  3. 미리보기로 확인한 후, 저장하거나 게시합니다.

3. 구글 지도 삽입 예제

아래 예제는 구글 지도에서 퍼가기 기능을 통해 가져온 코드입니다.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.5328248202886!2d126.97781345045114!3d37.566069152293004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca2ee154c9403%3A0x79b2e8d313bb91a!2z7J2E7KeA66Gc7J6F6rWs!5e0!3m2!1sko!2skr!4v1738487267030!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

위 코드를 복사하여 원하는 페이지나 글에 추가하면, 해당 위치의 구글 지도가 삽입됩니다. 그리고 지도 크기(width, height)를 조정하여 디자인에 맞게 변경할 수 있습니다.

👉 워드프레스에서 구글 지도를 삽입하는 방법은 매우 간단하며, 플러그인 없이도 HTML 코드만으로 쉽게 추가할 수 있습니다. 이제 구글 지도를 활용하여 방문자에게 더 정확한 위치 정보를 제공해 보세요!

함께 보면 좋은 게시글

이 글이 도움이 되셨다면 공유 부탁 드립니다.

동일 카테고리 게시글

위로 스크롤