구글지도가 제대로 로드되지 않는 문제가 발생하는 경우 [종합]

2

새로운 구글 맵 API 표준 플랜에 따라 2016년 6월 22일 이후에 생성되는 모든 신규 애플리케이션에는 Google Maps API 키를 입력해야 구글맵이 제대로 표시됩니다.

그리고 최근에는 구글 API 키를 발급받기 위해서는 신용카드 정보를 입력하도록 구글 정책이 바뀌었습니다.

Google Maps API 키를 입력하지 않거나 제대로 설정하지 않으면 구글지도를 로드할 때 “Google 지도를 제대로 로드할 수 없습니다” 또는 “The Google Maps API server rejected your request” 등의 오류가 발생하거나 지도가 잠깐 동안 로드되었다가 표시되지 않을 수 있습니다.

구글지도 오류

이 블로그에서 구글맵과 관련된 문제를 단편적으로 몇 개의 글에서 다루었습니다. 종합적으로 정리해야 할 때가 되었다는 생각하고 있었지만 좀처럼 시간을 내지 못하다가 오늘 마음먹고 정리해보았습니다. 미흡한 점은 추후에 보강하도록 하겠습니다.

구글맵 오류가 발생하는 경우 다음 사항을 체크하여 문제 해결을 시도해볼 수 있습니다.

  1. Google Maps API 키를 제대로 발급받았는가?
  2. HTTP 리퍼러를 설정했는가?
  3. API 키를 제대로 사이트에 추가했는가?

구글 API 키 발급

최근 Google Maps API 키를 발급받으려면 신용카드 정보를 입력하고 결제 계정을 연결해야 합니다.

신규 사용자:

구글 API 키를 발급받지 않았다면 다음 방법을 통해 새로 발급 받도록 합니다.

예전에는 https://developers.google.com/maps에서 구를 API 키를 발급 받았지만, 이제 이 링크를 클릭하면 Google Maps Platform(https://cloud.google.com/maps-platform/)으로 자동으로 이동하면서 곧바로 Google Maps API 키를 발급 받을 수 있는 화면이 표시됩니다.

구글 맵 플랫폼

위와 같이 “Google Maps Platform에 오신 것을 환영합니다” 화면이 표시되면 “시작하기“를 클릭합니다.

구글 지도 API 키

Maps를 체크하고 맨 아래 계속 옆의 아이콘(사각형 상자 모양 아이콘)을 누르면 새로운 프로젝트를 만들거나 기존 프로젝트를 선택할 수 있는 화면이 표시됩니다.

구글 맵 - 새 프로젝트 만들기

새로운 프로젝트를 생성(Create a new project)하거나 기존 프로젝트를 선택하고 Next를 클릭합니다.

구글 맵 결제 계정 만들기

그러면 결제 계정을 만드는 것을 선택하는 화면이 나타납니다. 취소를 클릭하면 처음 화면으로 되돌아가므로 결제 계정을 만들지 않은 경우 결제 계정 만들기를 클릭해야 정상적으로 진행됩니다.

구글 맵 API 만들기

위와 같은 화면이 나타납니다. 결제 계정을 만들어 연결하면 Firebase, Google Maps API 등을 포함하여 앱, 웹사이트, 서비스를 구축하고 실행하는 데 필요한 모든 기능을 이용할 수 있다고 안내하고 있습니다.

가입할 때 신용카드 정보를 입력해야 합니다. 저는 결제 계정을 만들었지만, 기존에 프로젝트를 만든 적이 있다면 결제 계정을 연결할 필요가 없다는 것을 알고 취소시켰습니다.

기존 사용자:

기존에 Google Maps API 키를 생성한 적이 있다면 신용카드 정보를 입력하지 않고도 새로운 사이트를 추가하여 기존 키를 이용할 수 있습니다.

기존 사용자는 아래의 HTTP 리퍼러 설정으로 이동하여 구글지도가 삽입되는 웹사이트를 지정해주도록 합니다.

구글 지도 사용량 제한 사항

2018년 6월 16일 이후부터 적용되는 가격 정책과 사용량 제한에 대해서는 다음 글을 참고해보세요.

기존 가격 정책은 “Pricing and Plans“에서 확인해볼 수 있습니다. 그리고 Google Maps Platform의 가격 책정 페이지도 참고해보시기 바랍니다.

HTTP 리퍼러 설정

구글 맵 API 키를 특정 사이트에서 사용할 수 있도록 HTTP 리퍼러를 설정해주어야 합니다. HTTP 리퍼러를 설정하지 않았다면 다음 방법에 따라 설정하도록 합니다.

구글 크롬에서 구글(지메일) 계정으로 로그인하고 Google Cloud Platform 콘솔에 접속합니다.

다음과 같은 화면이 표시되면 상단의 프로젝트 이름 부분을 클릭하여 표시되는 드롭다운 목록에서 적절한 프로젝트를 선택합니다.

구글 API 프로젝트 선택

그런 다음 왼쪽 상단의 세 줄 모양의 아이콘을 클릭하고 API 및 서비스 > 사용자 인증 정보를 선택합니다.

구글맵 사용자 인증

그러면 다음과 같은 화면이 표시될 것입니다. API 키 이름을 클릭합니다.

구글 맵 API 키 설정

API 키 제한사항을 설정할 수 있는 페이지가 표시됩니다.

구글맵 HTTP 레퍼러 설정

API 키를 복사하여 잘 보관하도록 하도록 합니다.

아래에서 애플리케이션 제한사항 > HTTP 리퍼러 (웹사이트)를 선택하고 맨 아래에 사이트를 추가하도록 합니다. 사이트는 https://*.example.com/* 형식으로 추가하면 됩니다.

SSL 보안서버 인증서가 설치되지 않은 경우 http://*.example.com/* 형식으로 추가하여 테스트해보시기 바랍니다. 만약 제대로 지도가 로드되지 않으면 http:// 혹은 https:// 프로토콜을 제외하고 주소를 넣어서 테스트해보세요.

사이트 추가 후에 맨 아래의 저장 버튼을 눌러 설정을 저장합니다.

워드프레스 사이트에 구글 맵 API 키 추가하기

이제 마지막으로 구글 API 키를 워드프레스에 추가해야 합니다. 다행히 많은 테마에서 구글 키를 추가할 수 있는 옵션을 제공합니다.

Avada 테마

아바다 테마의 경우 워드프레스 알림판 > Avada > 테마 옵션 > 컨택트 폼 > Google Map 아래에 Google Maps API Key를 입력할 수 있는 필드가 있습니다.

아바다 테마 구글맵 API 키 입력

Enfold 테마

엔폴드 테마의 경우 알림판 > Enfold > Google Services 아래의 Google Maps 섹션에 구글맵 API 키를 입력할 수 있습니다.

엔폴드 테마 구글 맵 API 키 입력

Newspaper 테마

Newspaper 테마에는 구글 API 키를 입력하는 전용 필드가 없는 것 같습니다. (혹시 있다면 아래 댓글을 통해 알려주시면 글을 수정하겠습니다.)

워드프레스 알림판 > Theme panel > Analytics/Js Codes 아래의
FOOTER SCRIPT CODE 섹션에 아래의 “수동으로 구글 API 키를 넣는 방법“에서 제시하는 스크립트를 입력하면 될 것 같습니다.

시간이 될 때 Newspaper 테마에 구글 API 키를 넣는 필드가 있는지 찾아보고, 만약 있다면 이 내용을 정정하겠습니다.

Divi 테마

Divi 테마에서는 알림판 > Divi > 테마 옵션 > General 탭 아래에 Google API 키를 넣은 입력란을 제공합니다.

Divi 테마 구글맵 API 키

Google Maps를 사용하지 않으면 바로 아래의 설정(Google Maps 스크립트의 인큐)을 비활성화하는 것이 좋습니다.

The7 테마

더세븐(The7) 테마에서는 테마옵션을 아무리 찾아보아도 구글 API를 추가하는 옵션을 찾을 수 없습니다.

The7에서 구글맵 키를 추가하려면 알림판 > The7 Ultimate > Google Maps를 클릭합니다.

The7 테마 구글 맵 API 키

Jupiter 테마

주피터 테마의 경우 알림판(대시보드) > Jupiter > Theme Options > Global Settings > API Integrations 아래에서 구글 API 키를 추가할 수 있습니다.

Jupiter 테마 구글 맵 API 키 추가

Other Integrations(기타 통합) 섹션 아래에 Google Maps API 키, 구글 애널리틱스 ID 등을 추가할 수 있는 필드가 제공됩니다.

수동으로 구글 API 키를 넣는 방법

테마에서 Google Maps API 키를 넣은 옵션을 제공하지 않는 경우 직접 테마 소스 파일에 추가할 수 있습니다.

구글에서는 다음과 같은 형식으로 javascript 코드를 추가할 것을 권장하고 있습니다(구글 개발자 문서 “Web Maps > JavaScript API > Get API Key” 참고).

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

이 형식으로 넣을 때 오류가 발생하면 다음과 같은 형식으로 넣어서 잘 작동하는지 테스트해보시기 바랍니다(구글 개발자 문서 “Upgrading Your Maps JavaScript API Application from V2 to V3” 참고).

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

위의 스크립트 코드를 보통 footer.php 파일에 추가하면 될 것 같습니다. </body> 바로 위에 입력하도록 합니다. (물론 차일드 테마를 이용하도록 합니다. 그렇지 않으면 테마를 업데이트할 경우에 수정 사항이 사라지게 됩니다.)

참고:

*일부 글에 제휴링크가 포함될 수 있습니다.기부를 통해 블로그 운영을 후원하실 수 있습니다.

Related Posts

댓글 2건
  1. 이카루스

    감사합니다..^^
    오늘 블로그 보고 깜짝 놀랐어요..
    보안인증서 갱신을 했는데 금요일이라 접수가 안되었나 보네요..ㅜㅜ
    빨리 갱신이 되었으면 합니다

    1. Word

      공교롭게도 어제 SSL 인증서가 만료되셨네요.
      이런 사안은 주말에도 처리해주면 좋을텐데, 아쉽네요.

댓글 남기기