워드프레스에서 구글 지도 오류가 발생하는 경우

워드프레스에서 구글 지도를 삽입할 때 다음과 같은 오류가 발생하는 경우가 있습니다.

워드프레스에서 구글 지도 오류가 발생하는 경우 1

이 경우 구글에서 Google Maps API 키를 발급 받아서 입력해주어야 합니다. 구글 API 키를 발급 받으려면 여기를 클릭하여 적절히 설정해주시기 바랍니다.

참고로 그림과 같이 HTTP 리퍼러 설정에서 구글 지도를 사용할 사이트를 등록해주도록 합니다.

워드프레스에서 구글 지도 오류가 발생하는 경우 2

위와 같이 형식은 *.example.com/*처럼 입력하도록 합니다.

그런 다음 구글 API 키를 테마 옵션에서 추가해주도록 합니다. 많은 유료 테마에서 Google Maps API 키를 입력하는 옵션을 제공합니다.

만약 테마에서 구글 지도 API 키를 입력하는 옵션을 제공하지 않는 경우에는 다음과 같은 코드를 사용 중인 워드프레스 테마의 함수 파일(functions.php)에 추가하면 지도가 제대로 표시될 것입니다.

// 구글 맵 API 키 추가하기
add_action('wp_footer', 'add_googlemaps');
function add_googlemaps() { ?>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE_여기에_키_입력"
type="text/javascript"></script>
<?php
}

반드시 차일드 테마를 만들어서 작업하시기 바랍니다("원클릭으로 간편하게 차일드 테마 만들기" 참고).

위의 코드가 잘 안 되면 다음 코드 형식을 사용해봅니다.

function nr_load_scripts() {

wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?key=XXXXXXX',null,null,true);
wp_enqueue_script('googlemaps');

}
add_action( 'wp_enqueue_scripts', 'nr_load_scripts' );

Visual Composer와 같은 페이지 빌더를 사용하는 경우 간단히 지도를 삽입할 수 있습니다. 그리고 Avada, Enfold 등 자체 페이지 빌더를 사용하는 경우에도 쉽게 추가가 가능합니다("Enfold 테마에서 구글 지도 삽입하는 방법" 참고). 수동으로 구글 지도를 삽입하는 방법은 이 글을 참고해보시기 바랍니다.

구글 API 키를 추가하고 적절히 설정하면 지도가 정상적으로 표시될 것입니다.

참고:

댓글 남기기

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드