워드프레스 5 예제 진행 시 구글 지도 출력 문제

구글 정책 변경으로 워드프레스 5 도서의 예제 진행과정에서 구글 지도가 출력되지 않는 경우가 있습니다.

실제 도메인(예, abc.com 또는 a.abc.com 등의 TLD 및 서브 도메인)을 사용하는 경우에 발생하며, 로컬에서 진행하는 경우(예, localhost 등)에는 발생하지 않는 것으로 수차례 테스트를 통해 확인하였습니다.

구글 지도가 나오지 않는 경우에 문제를 해결하는 방법을 간략하게 안내합니다. 모든 내용은 워드프레스 5 도서의 워드프레스 코어 파일과 플러그인 버전과 같은 파일을 사용할 때를 기준으로 정합니다.

구글 API Key 획득

구글 계정, 보통 Gmail 계정을 뜻하므로 계정이 없는 경우 가입해야 합니다. (https://gmail.com)

링크로 이동합니다. 로그인 전이면 로그인합니다.

‘프로젝트 만들기’ 선택 상태에서 ‘계속’ 버튼을 클릭하고 기다립니다.

‘Google Maps JavaScript API’ 선택, ‘어떤 사용자 인증 정보가 필요한가요?’ 버튼을 클릭합니다.

API 키가 바로 나옵니다. 키를 복사합니다.

이 키를 도서의 예제 사이트에만 사용하고 삭제할 계획이라면 ‘완료’ 버튼 클릭으로 키 획득을 끝내도 문제는 없습니다. 하지만, 자신의 사이트(도메인)에만 사용할 수 있도록 ‘키 제한하기’를 클릭합니다. 다음 그림을 참고하고, 자신이 사용할 도메인을 입력하여 저장합니다.

functions.php 파일 코드 수정

구글 지도가 나오지 않는 경우는 관리페이지 ‘매물정보등록’의 ‘위치정보 및 사진’ 탭의 지도와 프런트엔드의 여러 지도입니다.

wp-content > themes > house 디렉터리의 functions.php 파일 31번 줄에 다음의 코드가 있습니다. (완성 예제 기준의 줄 번호입니다.)

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');

이 부분의 수정은 프런트엔드에서 구글 지도 출력을 가능하게 합니다.

다음으로 아래 코드를 functions.php 파일 맨 아래 줄에 추가합니다. 이 코드는 완성예제에서는 없어도 되지만, 구글 지도 커스텀 필드를 확인하는 등의 과정에서는 필요한 코드입니다. ‘YOUR_KEY’는 획득한 구글 API 키로 대체합니다.

function my_acf_google_map_api( $api ){
    $api['key'] = 'YOUR_KEY';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

Advanced custom fields 파일 수정

구글 지도 출력을 위해 몇 가지 방법이 소개되고 있는데, 워드프레스 5 도서의 경우 가장 간단한 방법은 API 키를 특정 파일에 추가하는 것입니다.

wp-content > themes > house > acf > js > 디렉터리의 input.min.js 파일을 엽니다.

sensor=false&libraries=places 키워드로 검색하면 2군데가 있습니다. 2군데 모두 sensor=false&key=YOUR_KEY&libraries=places로 변경하고 저장합니다. ‘YOUR_KEY’는 획득한 구글 API 키로 대체합니다.

매물정보등록 시 ‘위치정보 및 사진’ 탭의 지도가 나오는지 확인합니다. 가능하다면 새로고침(Ctrl + F5) 후 확인하세요.

감사합니다.

  1. yunseoke79 댓글:

    제가 지금 해봤는데요…위에 function.php 완성본은 제가 아직 6장 공부중이라 못올려봤는데요…

    Advanced custom fields 파일 수정
    wp-content > themes > house > acf > js > 디렉터리의 input.min.js 파일만 수정했는데요..

    위치 정보 및 사진은 에서 또 다시 구글맵이 안나오네요….

    function.php 완성본을 꼭 올려야하는건가여 ?? 선택적인가여?

  2. yunseoke79 댓글:

    6장에서 function.php 완성본을 올리니 싸이트가 아예 뜨질않습니다.

    기존 funcction.php 에는 googlemap 관련정보가 없네요…

    1. jpress 댓글:

      본문 내용에 추가한 부분이 있습니다. 테마 functions.php 파일 맨 아래에 본문에서 안내한 코드를 추가하고 확인 해보세요.

댓글 입력 기간이 지났습니다.