[워드프레스] 비주얼 컴포저(Visual Composer)에서 구글 지도 삽입하기

Visual Composer(비주얼 컴포저)에서 구글 지도를 삽입하는 방법

구글 지도를 블로그에 삽입하는 방법은 "블로그에 구글맵 삽입하기" 글에서 설명하고 있습니다. 워드프레스에서 비주얼 컴포저(Visual Composer)와 같은 페이지 빌더를 사용하는 경우에는 보다 수월하게 구글 지도를 블로그에 추가할 수 있습니다.

참고로 Google의 새로운 구글 맵 API 표준 플랜에 따라 2016년 6월 22일 이후에 만들어지는 모든 신규 애플리케이션에서는 Google Maps API 키가 필요합니다. 현재까지는 기존 애플리케이션에서는 키 없이도 계속 작동하지만 새로운 제한 사항이 적용될 것이라고 합니다.

구글 맵 API 키가 없다면 먼저 이 구글 문서를 참고하여 브라우저 키를 만들어서 구글 맵 삽입 시 API 키를 추가해주어야 합니다.

많은 워드프레스 테마에서는 Google Maps Api Key를 등록할 수 있는 옵션을 제공합니다. 예를 들어, 인기 테마 중 하나인 Bridge(브릿지) 테마에서는 Qode Options > General 메뉴에서 맨 아래의 "Google Maps" 섹션에 키를 등록할 수 있습니다. (Avada, Enfold 등 대부분의 유료 테마에서는 이와 비슷한 옵션을 제공합니다.)

브릿지 테마의 Google Maps 섹션
브릿지 테마의 Google Maps 섹션

만약 테마에서 Google Maps API 키를 추가하는 옵션을 제공하지 않는 경우 직접 다음과 같은 스크립트를 테마 소스 파일에 추가해주시면 됩니다(구글 문서에 자세히 설명되어 있습니다).

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
type="text/javascript"></script>

비주얼 컴포저(Visual Composer)를 사용하는 경우 Add new element(+ 기호)를 클릭하고 Google Maps 요소를 클릭하여 원하는 곳에 추가하도록 합니다.

Visual Composer에서 구글 맵 요소 추가하기
Visual Composer에서 구글 맵 요소 추가하기

요소를 추가하면 곧바로 Google Maps Settings 팝업이 표시됩니다. 표시되지 않으면 편집(연필 모양) 아이콘을 클릭하여 Google Maps Settings 화면을 표시합니다.

Visual Composer의 구글맵 설정 화면
Visual Composer의 구글맵 설정 화면

(1)에는 삽입하고자 하는 구글 지도의 소스 코드를 추가하고, (2)에는 높이를 지정해줄 수 있습니다. 혹은 비워두면 반응형으로 작동합니다. (3)에서는 추가 클래스 이름을 지정할 수 있습니다.

구글 지도 소스는 구글 맵 사이트에서 원하는 주소를 검색하고 지도 퍼가기 소스를 복사하면 됩니다(참고). 제대로 추가되었다면 이제 구글 지도가 올바르게 표시될 것입니다.

비주얼 컴포저에서 구글 지도 삽입하기

경우에 따라 다음과 같은 오류가 발생할 수 있습니다.

Oops! Something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details(죄송합니다 문제가 발생했습니다, GOOGLE 지도가 제대로 로드되지 않았습니다. 자바스크립트 콘솔에서 기술 정보를 확인하세요)

이 경우 ‘Google 지도가 제대로 로드되지 않았습니다’ 오류가 발생하는 경우 – Google Maps API 키와 새로운 제한 글을 참고로 문제 해결을 시도해볼 수 있습니다. 문제가 잘 해결이 안 되면 서비스 문의 페이지에서 서비스(유료)를 의뢰하실 수 있습니다.

참고

"Wordpress Tutorial: Visual Composer - Google Maps"라는 제목의 유튜브 동영상입니다. 영어로 진행되지만 영상만 보더라도 과정을 대략적으로 이해할 수 있을 것입니다.


댓글 남기기

* 이메일 주소는 공개되지 않습니다.