'Google 지도가 제대로 로드되지 않았습니다' 오류가 발생하는 경우 - Google Maps API 키와 새로운 제한

Google-Map-error

Google Maps API 키와 새로운 제한: 일일 최대 25.000건의 지도 로드 가능

최근 구글 맵을 추가할 때 다음과 같은 오류가 발생하는 경우가 종종 있습니다.

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

※ 2018년 11월 업데이트: 최근 구글 정책이 변경되어 Google Maps API 키를 발급받으려면 신용카드 정보를 입력하여 결제 계정을 연결해야 합니다. "구글지도가 제대로 로드되지 않는 문제가 발생하는 경우 [종합]"에서 업데이트된 정보를 확인할 수 있습니다.

이 문제는 구글의 업데이트된 Google Maps APIs Standard Plan과 관련이 있습니다. 자세한 내용은 "Building for Scale: Updates to Google Maps APIs Standard Plan"을 참고해보시기 바랍니다.

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

새로운 정책 발표 이전에 Google Maps API는 일일 최대 25,000개의 요청을 키 없이 사용 가능하고 90일 연속 25,000건을 초과하는 경우에만 비용을 청구했습니다.

이제 새로운 API 키가 모든 신규 애플리케이션에 대하여 요청되지만 일별 25,000건의 무료 지도 로드 제한이 있습니다.

이 제한을 초과하는 경우 추가 1,000건의 지도 요청당 $0.50USD에 추가 일일 지도 로드(Extra Daily Map Load)를 구매할 수 있으며 최대 100,000건까지 가능합니다.

매일 125,000건 이상의 구글 맵 로드가 필요한 웹사이트나 애플리케이션은 Premium Plan 라이선스로 업그레이드해야 합니다.

워드프레스에서 위와 같은 문제가 발생하는 경우 Google Maps API KEY 플러그인을 설치하고 설정 > Google API Key에서 자신의 API 키를 등록하면 Google Maps 스크립트가 올바르게 Enqueue되어 있는 경우 문제가 해결될 것입니다.  (Google Maps API 키를 발급받는 방법은 이 글의 "How to fix the error: step-by-step tutorial" 부분을 참고해보시기 바랍니다.)

또는 구글 맵 API를 발급 받은 후에 Google Maps 스크립트 코드를 찾아서 API 키를 추가해주어도 됩니다. 이 방법도 "Google Maps API error: MissingKeyMapError"라는 글에서 확인해볼 수 있습니다.

Google Maps API 키 발급 방법을 한글로 보려면 이 구글 문서를 참고하시기 바랍니다. 구글 맵 API 키를 발급받고 올바르게 설정하면 다음과 같은 형식으로 스크립트를 추가하거나 수정하시면 됩니다.

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

참고: 워드프레스의 경우 특히 Enfold 테마에서 위의 문제가 많이 발생하는 것 같습니다. 하지만 구글 맵을 사용하는 다른 테마에서도 마찬가지 문제가 발생할 것으로 생각됩니다. Enfold 테마를 비롯한 문제가 되는 테마에서는 조만간 Google Maps API를 추가할 수 있는 옵션을 제공할 것으로 생각됩니다. 추가: Enfold 테마의 경우 3.7 버전이 나오면서 Google Maps API Key를 추가할 수 있는 옵션이 새로 추가되었습니다(참고).

추가 사항

Enfold 테마에서 구글 맵 삽입하기

업데이트: Enfold 테마가 새로운 Google Maps API를 추가하도록 업데이트(버전 3.7)되었습니다. 아래의 내용은 불필요한 내용이지만 참고를 위해 그대로 두었습니다.

Enfold 테마에서 위의 방법으로 문제가 해결되지 않으면 임시적으로 /framework/php/class-framework-widgets.php 파일에서:

wp_register_script( 'avia-google-maps-api', $prefix.'://maps.googleapis.com/maps/api/js?v=3.24',

위 부분을 아래와 같인 구글 API 키를 추가하도록 수정해보시기 바랍니다.

wp_register_script( 'avia-google-maps-api', $prefix.'://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.24',

BeTheme 테마에서 구글 맵 삽입하기

BeTheme 테마의 경우 외모 > BeTheme Options > Global > Advanced에서 Options 부분에 Google Maps API Key를 추가하는 옵션이 있습니다.

Google Mpas API Key in BeTheme

문제가 계속 발생하는 경우

문제가 해결되지 않는 경우 이 페이지의 양식을 제출하여 서비스를 의뢰(유료)하실 수 있습니다.

참고:


5개 댓글

  1. 예를 들어, 2016년 6월 22일 이전에 등록한 사이트에서 작업을 하여 2016년 6월 22일 이후에 등록한 사이트로 이전(마이그레이션)할 경우, 이전 사이트에서는 제대로 작동하던 구글 맵이 새로운 사이트에서는 위와 같은 오류를 표시할 수 있습니다.

댓글 남기기

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