오래전에 구글 지도를 연동시킨 워드프레스 사이트에서 "죄송합니다. 문제가 발생했습니다. Google 지도가 제대로 로드되지 않았습니다. 자바스크립트 콘솔에서 자세한 기술 정보를 확인하세요" 오류가 발생하는 문제가 발생했습니다.
Google 지도가 제대로 로드되지 않았습니다: RefererNotAllowedMapError 오류
구글 지도 로딩 오류가 발생하는 경우 브라우저 콘솔에 오류 메시지가 표시되지 않는지 먼저 체크해 보면 좋습니다.
해당 사이트에서는 다음과 같은 에러 메시지가 표시되고 있었습니다.
js?key=구글맵API키&libraries=places&language=ko&callback=Function.prototype&ver=1.3.102:220 Google Maps JavaScript API error: RefererNotAllowedMapError
여기서 에러의 원인을 파악할 수 있는 핵심 메시지는 "Google Maps JavaScript API error: RefererNotAllowedMapError" 부분입니다.
RefererNotAllowedMapError 오류가 표시되면 Google Maps Platform에 로그인하여 HTTP 리퍼러 설정을 확인하여 해당 도메인을 제대로 등록되어 있는지 체크하시기 바랍니다.
API 및 서비스 » 키 및 사용자 인증 정보로 이동하여 API 키에서 해당 API 키를 누르도록 합니다.
HTTP 리퍼러를 살펴보니 기존 도메인이 추가되어 있어서 오류가 발생하고 있었습니다.
즉, 클라이언트께서 사이트의 도메인을 변경하면서 HTTP 리퍼러 설정을 업데이트하지 않아서 발생하는 문제였습니다. 기존 도메인을 새 도메인으로 변경하니 곧바로 구글 지도 로딩 오류가 사라지면서 지도가 올바르게 표시되었습니다.
https://example.com/*과 같은 형식으로 웹사이트를 추가하거나 수정하여 문제가 해결되는지 체크하시기 바랍니다. 만약 www 도메인을 사용한다면, https://www.example.com/*과 같은 포맷으로 추가하면 될 것입니다.
구글 지도가 제대로 로드되지 않는 오류가 발생하는 경우 다음 글을 참고하여 문제 해결을 시도해보시기 바랍니다.
사이트에 구글맵 API를 사용하고 있는 상태에서 사이트의 도메인을 변경하는 경우 HTTP 리퍼러 설정에서 해당 도메인을 변경해야 구글 지도가 제대로 표시됩니다.
참고로 구글 크롬 브라우저의 콘솔에서 다음과 같은 경고가 표시되고 있었습니다.
As of February 21st, 2024, google.maps.Marker is deprecated. Please use google.maps.marker.AdvancedMarkerElement instead. At this time, google.maps.Marker is not scheduled to be discontinued, but google.maps.marker.AdvancedMarkerElement is recommended over google.maps.Marker. While google.maps.Marker will continue to receive bug fixes for any major regressions, existing bugs in google.maps.Marker will not be addressed. At least 12 months notice will be given before support is discontinued.
이 경고를 대략적으로 번역하면 다음과 같습니다.
2024년 2월 21일자로 google.maps.Marker가 사용이 중단되었습니다. 대신 google.maps.marker.AdvancedMarkerElement를 사용하세요. 지금은 google.maps.Marker가 중단이 예정되어 있지는 않지만, google.maps.Marker보다는 google.maps.marker.AdvancedMarkerElement를 사용할 것을 권장합니다.
지원이 중단되기 최소 12개월 전에 고지가 될 것이라고 하네요. 구글 개발자 문서에서 자세한 정보를 확인할수 있습니다.
참고
https://avada.tistory.com/2897
https://avada.tistory.com/2335
https://avada.tistory.com/3046