Google 지도는 전 세계 어디에서나 지리적 지역과 도로 지도를 제공하는 웹 기반 지도 서비스입니다. 그러나 일부 웹사이트 소유자는 "이 페이지는 Google 지도를 올바르게 로드할 수 없습니다. " 대신 Google 지도를 로드합니다. 이 오류는 "이 페이지는 Google 지도를 올바르게 로드하지 못했습니다. 기술 세부정보는 자바스크립트 콘솔을 참조하세요. ".
참고: 이 솔루션은 일반 사용자가 아닌 웹사이트 소유자를 대상으로 합니다.
Google 지도가 올바르게 로드되지 않는 원인은 무엇입니까?
Google 지도 플러그인은 오류 없이 훌륭하게 작동하지만 Google이 지도가 포함된 웹사이트에 대한 규칙을 변경하면서 지난 몇 년 동안 상황이 변경되었습니다. 웹사이트 소유자는 이전에 포함된 코드를 사용하여 이 작업을 수행할 수 있었지만 이제는 Google 지도가 제대로 작동하려면 API 키가 필요합니다. API 키를 이미 추가했다면 Chrome의 '요소 검사 -> 콘솔' 탭에서 Google이 사이트에서 지도를 허용하지 않는 정확한 이유를 확인할 수 있습니다. 잘못된 키, 키 제한 등으로 인한 것일 수 있습니다.
사이트 설정에 Google API 키 추가
프로젝트나 웹사이트에서 Google 지도가 작동하도록 하려면 Google API 키를 만들고 사이트 설정에 추가해야 합니다. 키를 만들고 다른 오류를 해결하려면 Google 개발자에 로그인해야 합니다.
지도용 스크립트를 수동으로 삽입한 경우 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,200만 개 이상의 웹사이트에서 사용하는 가장 인기 있는 CMS이기 때문에 WordPress에 대해서만 단계를 보여줍니다.
- Google 지도에 사용 중인 플러그인 설정으로 이동하면 API 키를 추가할 수 있는 옵션이 있어야 합니다. 없는 경우 이전 버전의 플러그인이나 오래된 플러그인을 사용 중일 수 있습니다.
- WordPress 사이트에서 API 키에 대한 설정을 열어 둡니다.
- Google의 Cloud Resource Manager로 이동
- 아직 로그인하지 않은 경우 Google에 로그인
- “프로젝트 만들기를 클릭합니다. ", 프로젝트 이름을 지정하고 "만들기를 클릭합니다. "
- Google의 인에이블링 API 웹페이지로 이동합니다.
- “프로젝트 선택을 클릭합니다. '를 선택한 다음 방금 만든 새 프로젝트를 선택하고 계속
- “API 및 서비스 활성화를 누릅니다. "
- 'Maps JavaScript API 검색 ”하고 여십시오.
- 그런 다음 "활성화 " 버튼
- 탐색 메뉴를 클릭하고 'API 및 서비스를 선택합니다. ' 및 '자격 증명 "
- 자격 증명 생성 드롭다운을 클릭하고 'API 키를 선택합니다. "
참고 :원하는 경우 무단 사용을 방지하기 위해 Restrict Key로 설정할 수 있습니다. - “닫기를 클릭합니다. ” 그런 다음 생성된 키를 클릭합니다.
- 'HTTP 리퍼러 선택 " 응용 프로그램 제한
- 웹사이트 URL을 추가하고 '저장을 클릭합니다. "
- 이제 키를 복사하고 WordPress 사이트로 돌아갑니다.
- 왼쪽 패널 아래로 스크롤하여 '설정 "
- “Google API KEY에 대한 옵션을 찾을 수 있습니다. "를 열고 거기에 키를 붙여넣으세요.
- 설정을 저장하고 페이지로 이동하여 새로고침하세요.
참고: Google은 300$ 상당의 크레딧 또는 12개월 무료 사용(둘 중 더 빨리 감소)만 허용하므로 결제가 활성화되었는지 확인합니다. 그 후에 결제를 설정하고 구현해야 합니다.