[워드프레스] Enfold 테마에서 구글 지도 삽입하는 방법

들어가며

다목적용 프리미엄 워드프레스 테마인 Enfold는 페이지 빌더로 Visual Composer 대신 Avia Layout Builder를 사용하고 있습니다. Avia는 VC보다 가볍다는 평가가 있습니다. 그리고 VC를 사용할 경우 IE 하위 버전과의 호환성에 문제가 발생하지만 Avia Layout Builder의 경우 그런 가능성이 줄어든다고 합니다. 이런 이유는 Enfold만을 사용하여 사이트를 만드는 분도 있습니다.

Enfold에서 구글맵을 삽입하는 방법으로 두 가지가 있습니다. Avia Layout Builder에서 구글 지도를 삽입할 수 있고, 위젯으로도 삽입이 가능합니다.

페이지/글에서 구글맵 추가하기

페이지 편집 화면에서 "Default Editor"(기본 편집기) 대신 "Advanced Layout Editor"(고급 레이아웃 편집기)를 선택합니다. 그러면 에디터가 Avia Layout Builder로 바뀝니다. Media Element(미디어 요소)에서 Google Map을 선택하여 끌어다가 원하는 곳에 놓습니다.

그러면 다음과 같이 Google Map 요소가 추가됩니다.

Google Map 요소 내부를 클릭하면 편집할 수 있는 화면이 표시됩니다.

적당히 수정하고, Address를 클릭합니다. 그러면 주소를 입력하는 화면이 표시됩니다.

주소를 위와 비슷한 형식으로 입력하고 "Enter Address, then fetch coordinates"(주소를 입력한 다음 좌표 가져오기)를 클릭하면 Longitude(경도)와 Latitude(위도)가 자동으로 가져와서 채워집니다. Marker Tooltip(마커 툴팁)에는 마커를 클릭했을 때 표시될 문구를 추가합니다.

저장하고 페이지를 확인해보면 지도가 정상적으로 표시됩니다.

간혹 안 된다고 하시는 분이 계신데요, 주소를 위의 스크린샷과 같은 형식으로 입력하면 제대로 표시될 것입니다. 잘 안 되면 영문으로 주소를 입력하면 됩니다.

구글맵 위젯 추가하기

Enfold에서는 별도의 플러그인 없이 위젯으로도 구글맵을 추가할 수 있습니다. 외모 > 위젯으로 이동한 후에 Enfold Google Maps Widget을 원하는 곳으로 끌어다 놓습니다.

위와 비슷한 형식으로 주소를 입력하고 "Fetch coordinates!"를 클릭하면 좌표를 끌어와서 위젯 영역에 구글 지도를 표시하게 됩니다.

개인적으로는 AVADA보다 Enfold가 더 마음에 드네요. AVADA가 판매 1위를 꾸준히 유지하고 있지만 덩치가 큰 느낌인 반면 Enfold는 조금 가볍다는 느낌이 듭니다.

특별한 플러그인을 사용하지 않고 구글맵을 삽입하는 방법은 "블로그에 구글맵 삽입하기"를 참고해보시기 바랍니다.

참고로 페이지 빌더로 Visual Composer가 많이 사용되고 있는데요, 가능하면 페이지 빌더를 사용하지 않는 것이 좋습니다. 페이지 빌더는 사이트 속도를 떨어뜨리고 호환성 문제를 야기할 가능성이 높습니다. 자세한 내용은 "워드프레스 페이지 빌더의 장점과 단점"을 참고해보세요.

지도가 제대로 표시되지 않는 경우

구글 지도가 제대로 표시되지 않고 다음 오류가 나는 경우가 있을 수 있습니다.

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

이 경우 테마 옵션에서 구글 API 키를 입력해주도록 합니다.