Computer >> 컴퓨터 >  >> 문제 해결 >> Windows 오류

'이 페이지에서 Google 지도를 올바르게 로드할 수 없습니다' 오류 해결 방법

Google 지도(Google Maps)는 전 세계 어느 지역이든 지리적 정보와 도로 지도를 제공하는 웹 기반 매핑 서비스입니다. 그런데 일부 웹사이트 운영자들은 지도가 정상적으로 표시되지 않고 "This page can't load Google Maps correctly(이 페이지에서 Google 지도를 올바르게 로드할 수 없습니다)"라는 오류 메시지를 마주하게 됩니다. 경우에 따라 "This page didn't load Google Maps correctly. See the JavaScript console for technical details"라는 문구로 표시되기도 합니다.

참고: 이 가이드는 일반 사용자가 아닌 웹사이트 운영자를 대상으로 작성되었습니다.

Google 지도가 올바르게 로드되지 않는 원인

예전에는 Google 지도 플러그인이 별도의 오류 없이 잘 작동했습니다. 그러나 몇 년 전 Google이 지도를 임베드하는 웹사이트에 대한 정책을 변경하면서 상황이 달라졌습니다. 과거에는 임베드 코드만으로 충분했지만, 이제는 Google 지도가 정상적으로 작동하려면 반드시 API 키가 필요합니다.

이미 API 키를 추가한 상태라면 Chrome 브라우저에서 '검사(Inspect) → 콘솔(Console)' 탭을 열어 Google이 사이트에서 지도를 차단하는 정확한 원인을 확인할 수 있습니다. 주요 원인으로는 잘못된 키 입력, 키 제한 설정 문제 등이 있습니다.

사이트 설정에 Google API 키 추가하기

프로젝트나 웹사이트에서 Google 지도를 사용하려면 먼저 Google API 키를 생성한 뒤 사이트 설정에 추가해야 합니다. 키 생성 및 오류 해결을 위해서는 Google Developers에 로그인해야 합니다.

지도 스크립트를 직접 삽입하는 경우에는 아래 코드처럼 YOUR_API_KEY 부분에 발급받은 API 키를 넣어주면 됩니다.

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

WordPress는 1억 7천만 개 이상의 웹사이트에서 사용되는 세계 최대 CMS이므로, 여기서는 WordPress 기준으로 절차를 안내하겠습니다.

WordPress에서 API 키 설정하는 단계

  1. 사용 중인 Google 지도 관련 플러그인의 설정 페이지로 이동합니다. API 키를 입력하는 옵션이 있어야 하며, 해당 옵션이 없다면 구버전이거나 업데이트가 중단된 플러그인을 사용 중일 가능성이 높습니다.
  2. WordPress 사이트의 API 키 설정 화면을 열어 둡니다.
  3. Google Cloud 리소스 관리자(Cloud Resource Manager) 페이지로 이동합니다.
  4. 로그인하지 않은 상태라면 Google 계정으로 로그인합니다.
  5. "프로젝트 만들기(Create Project)"를 클릭하고, 프로젝트 이름을 입력한 후 "만들기(Create)"를 누릅니다.
  6. Google API 사용 설정(Enabling API) 페이지로 이동합니다.
  7. 상단의 "프로젝트 선택(Select a Project)"을 클릭하고 방금 생성한 프로젝트를 선택한 뒤 "계속(Continue)"을 누릅니다.
  8. "API 및 서비스 사용 설정(Enable APIs and Services)"을 클릭합니다.
  9. "Maps JavaScript API"를 검색하여 해당 항목을 엽니다.
  10. "사용(Enable)" 버튼을 누릅니다.
  11. 탐색 메뉴를 클릭하고 "API 및 서비스(APIs & Services)"를 선택한 후 "사용자 인증 정보(Credentials)"로 이동합니다.
  12. "사용자 인증 정보 만들기" 드롭다운을 클릭하고 "API 키(API Key)"를 선택합니다.
    참고: 무단 사용을 방지하려면 필요에 따라 키 제한(Restrict Key) 옵션을 활용할 수 있습니다.
  13. "닫기(Close)"를 클릭한 후 생성된 키를 클릭합니다.
  14. 애플리케이션 제한(Application restrictions)에서 "HTTP 리퍼러(HTTP referrers)"를 선택합니다.
  15. 본인의 웹사이트 URL을 추가하고 "저장(Save)"을 클릭합니다.
  16. 발급된 키를 복사한 후 WordPress 사이트로 돌아갑니다.
  17. 왼쪽 관리자 패널 아래쪽으로 스크롤하여 "설정(Settings)"으로 이동합니다.
  18. "Google API KEY" 옵션을 찾아 열고 복사한 키를 붙여넣습니다.
  19. 설정을 저장한 후 해당 페이지로 이동하여 새로 고침하면 지도가 정상적으로 표시됩니다.

참고: 반드시 결제(Billing)가 활성화되어 있는지 확인하세요. Google은 300달러 크레딧 또는 12개월 무료 사용 중 먼저 소진되는 조건까지만 무료로 제공합니다. 이후에는 결제 수단을 등록하고 요금제를 설정해야 지도 API를 계속 사용할 수 있습니다.