구글 지도 오류가 발생하는 경우 - 구글 API 키 발급 방법 변경

워드프레스 정보를 제공하는 블로그 Avada 2018. 8. 14. 16:25 • 댓글:

워드프레스나 다른 CMS에 구글 지도를 삽입할 때 다음 그림과 같이 "Google 지도를 제대로 로드할 수 없습니다" 오류가 발생하는 경우가 있습니다.

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

구글 맵 API 키 발급

Maps를 누르고 맨 아래 계속 옆의 아이콘을 누르면 새로운 프로젝트를 만들거나 기존 프로젝트를 선택할 수 있는 화면이 표시됩니다.

구글 맵 API 키 발급

새로운 프로젝트를 생성하거나 지존 프로젝트를 선택하고 Next를 클릭합니다.

구글 맵 API 키 발급

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

Google Cloud Platform 구글 맵 API 설정

위와 같은 화면이 표시됩니다. Firebase, Google Maps API 등을 포함하여 앱, 웹사이트, 서비스를 구축하고 실행하는 데 필요한 모든 기능을 이용할 수 있다고 안내하고 있습니다.

가입하면 300달러의 무료 크레딧을 받아서 12개월 동안 사용이 가능한 것 같습니다. 가입할 때 신용카드를 요청한다고 하네요.

저는 굳이 가입할 필요가 없어서 취소를 눌렀습니다. Google Maps API 키를 발급 받아야 하는 경우 결제 계정을 만들고 일반적인 방법으로 API 키를 발급받으면 될 것 같습니다.

Google Maps API 키를 발급 받으면 워드프레스 테마에서 제공하는 테마 옵션에서 키를 입력할 수 있습니다.

예를 들어, 아바다 테마의 경우 Avada > 테마 옵션 > 컨택트 폼 > Google Maps에서 구글맵 API 키를 입력할 수 있습니다.

아바다 테마 구글 맵 API 설정

Divi 테마의 경우 Divi > Theme Options > General에서 구글 API 키를 설정할 수 있습니다.

Divi 테마 구글 맵 API 입력

Google Maps API 키를 입력해도 문제가 발생하면 다음 글을 참고해보세요.

※ 추가: 신용카드 정보를 입력하지 않고 구글 API 키를 발급받는 방법은 여기를 참고해보세요.