워드프레스 5에서 Advanced Custom Fields 구글지도 필드 및 사이트 구글지도 출력

워드프레스 5 예제는 Advanced Custom Fields(ACF) 플러그인을 보통의 설치 방식이 아닌 테마 내 추가의 방법으로 사용하며, 구글지도를 사용하는 곳은 관리페이지 ‘매물정보등록’의 ‘위치정보 및 사진’ 탭의 지도와 매물 위치 마커 출력의 프런트엔드 여러 지도입니다.

예제를 구성할 때는 구글지도 사용을 위해 API 키가 필요하지 않았지만, 구글 정책 변경 등으로 키가 없으면 이제는 지도를 사용할 수 없습니다.

워드프레스 5 도서의 경우 가장 간단한 방법은 API 키를 특정 파일에 그냥 단순하게 추가하는 것으로 키 획득은 범용적이나 추가 방법은 예제에 한정한 내용임을 알립니다.

Maps JavaScript API 키 획득

먼저, 구글지도를 사용하기 위해 API 키를 얻는 방법은 다음 포스트를 참고하세요.

구글지도 플랫폼 사용을 위해 카드정보 입력하지 않고 API Key 생성하기

이제 API 키가 있으며, 워드프레스 5 예제 구성 기준인 ACF 4.4.3 버전을 사용한다는 가정에서 이어갑니다.

프런트엔드 지도 출력을 위해 functions.php 파일에 키 추가

완성 예제 파일 기준 functions.php 파일 32번 줄 정도에 다음의 코드가 있습니다.

wp_enqueue_script('google-maps-api', 'https://maps.google.com/maps/api/js?region=KR');

다음을 참고하여 ‘YOUR_KEY‘에 획득한 API 키를 추가하고 저장합니다.

wp_enqueue_script('google-maps-api', 'https://maps.google.com/maps/api/js?key=YOUR_KEY&region=KR');

이것만으로 프런트엔드(사이트)에서 구글지도 출력은 충분합니다.

관리페이지 ‘매물정보등록’ 편집 화면의 위치정보 필드의 구글지도 출력

ACF 플러그인을 테마에 추가하는 책의 내용을 참고하여 테마에 추가한 후 다음 경로의 파일을 편집기로 엽니다.

wp-content/themes/house/acf/js/input.min.js

편집기에서 검색 기능을 이용하여 다음 소스를 검색합니다.

sensor=false&libraries=places

2군데가 나오는데, 다음 소스로 모두 변경하고 저장합니다. ‘YOUR_KEY‘에는 획득한 API 키를 추가합니다.

sensor=false&key=YOUR_KEY&libraries=places

관리페이지 매물정보등록 편집 화면과 프런트엔드에서 새로고침(Ctrl + F5) 후 구글지도 출력을 확인해보세요.

댓글