구글 지도 설정

Google 지도를 이용하려면 개별 사이트 단위로 API 키를 입력하여야 합니다.  

국내 기반의 지도만 필요한 경우

네이버 지도 API 사용을 권장합니다. 네이버 지도는 일간 200,000회 지도 로드를 무료로 제공하고 있으며, 이는 방문자가 많은 대부분의 사이트에서도 추가 비용 없이 사용할 수 있습니다. 네이버 지도는 대한민국 지역만 표현 가능합니다.

네이버 지도 설정방법 알아보기

국외 기반의 지도가 필요한 경우

Google 지도를 사용해 대한민국 외의 지역을 지도로 표시할 수 있습니다. Google 지도를 사용하기 위해선 Google 지도 API 키를 발급받아 내 사이트에 적용해야 합니다.

시작에 앞서

  • Google 계정이 필요합니다. 아직 Google 계정이 없다면 Google 계정 만들기 에서 새로운 계정을 만들어 주세요.
  • Google 지도를 사용하려면 Google 지도 서비스에 가입해야 하며, 가입 과정에서 해외 결제가 가능한 신용카드를 등록해야 합니다. 신용카드 등록을 요청하는 이유는 자동 가입을 방지하기 위함입니다. 유료 계정으로 직접 업그레이드 하거나 자동 결제를 설정하지 않는 한 자동으로 결제되지 않습니다.
  • Google 지도 API 처음 이용자에게는 가입 즉시 90일간 사용할 수 있는 미화 300달러 상당의 무료 크레딧을 제공하며, 추가로 매달 200달러의 무료 크레딧을 제공합니다. 해당 크레딧은 방문자가 지도를 볼 때마다 차감됩니다. 더 자세한 사항은 결제 계정 크레딧 에서 확인할 수 있습니다.
  • 월간 200달러의 크레딧은 대부분의 사용자가 원하는 기능을 이용하기에 충분합니다. 더 상세한 Google 지도 사용료는 지도 가격표에서 알아볼 수 있습니다.
  • 200달러를 초과하는 경우, 등록한 신용카드로 추가 이용료가 청구될 수 있습니다. 이용료가 적용되는 방식은 결제 계정 크레딧 에서 더 자세히 확인할 수 있습니다.
  • 만약 국외/국내 지도가 모두 필요한 경우 네이버 지도 API 와 Google 지도 API 를 모두 설정 후, 선택적으로 사용할 수 있습니다. 네이버 지도 설정하기

설정방법

1단계: API 키 발급받기

  1. Google Maps Platform 에 접속합니다.
  2. 오른쪽 상단의 시작하기(또는 Get started) 버튼을 클릭합니다.

  3. Google 계정으로 로그인 합니다. (로그인 완료 후 Google의 설문 요청이 있을 수 있습니다. 나중에 를 클릭하여 건너뜁니다.)
  4. 국가를 대한민국으로 선택하고, 서비스 약관에 동의 후 계속 버튼을 클릭합니다.
  5. 본인 확인 및 연락처 정보를 확인하고 계속 버튼을 클릭합니다. (만약 다른 번호를 사용하려면 다른 번호 사용 을 클릭 후 인증을 완료해 주세요.)
  6. 고객 정보를 작성하고, 계속 버튼을 클릭합니다.
    참고:  계좌 유형에 따라 작성해야 할 내용이 일부 달라집니다. 이 도움말에서는 개인을 기준으로 설명합니다.
  7. 고객 정보 입력 항목이 나오면 이름, 주민등록번호, 이동통신사, 휴대전화번호 입력 후 코드 전송을 클릭합니다. 이후 휴대전화번호로 코드가 발송되면 해당 코드를 코드 입력 칸에 입력합니다.
  8. 결제 수단 항목이 나오면 신용카드를 등록합니다. (해외결제가 가능한 신용카드가 필요합니다.)
    참고: 가입 즉시 90일간 사용할 수 있는 미화 300달러 상당의 크레딧을 제공하며, 300달러를 모두 소진 하더라도  자동 결제 되지 않습니다. 이후 매달 200달러의 월간 크레딧을 제공합니다.
  9. 무료 평가판 시작하기 버튼을 클릭합니다.
  10. Google Maps Platform 사용 설정이라는 이름으로 간단한 설문이 표시될 수 있습니다. 설문을 완료하고, 제출 버튼을 클릭합니다.
  11. API 키 발급 창이 나오면 복사 아이콘을 클릭해 API 키를 복사하고 메모해 둡니다. 그리고 Google Maps Platform으로 이동 버튼을 클릭합니다.

  12. 잠시 로딩 후 API 키 보호 창이 나타납니다. 계속해서 다음 2단계를 진행해 주세요.

2단계: API 키 보호 설정하기

참고: 만약 실수로  API 키 보호 창을 닫은 경우, 이 도움말 하단에  실수로 API 키 보호 설정을 건너뛴 경우 도움말에 따라 계속해서 설정을 진행할 수 있습니다.
  1. API 키 보호 창에서 Select restriction type 을 API 제한사항 으로 선택합니다.

  2. 1개 이상의 지도 API로 사용량 제한 에서 Geocoding API 와 Maps JavaScript API 를 선택 후, 확인을 클릭합니다.

  3. 키 제한 버튼을 클릭합니다.

3단계: 내 사이트에 Google 지도 API 키 적용하기

  1. 내 캠페이너스 사이트 관리자 페이지에 접속합니다.
  2. 왼쪽 메뉴에서 [환경설정 > 소셜 로그인/API 설정]을 클릭합니다.
  3. 공유 및 API 설정 을 클릭합니다.

  4. Google 지도 API 에서 API 키 항목에 위 1단계에서 발급받은 API 키를 붙여넣습니다.

  5. 저장 버튼을 클릭해 적용합니다.

4단계: 디자인 모드에 Google 지도 표시하기

  1. 관리자 페이지 왼쪽 상단의 디자인모드 를 클릭해 디자인 모드로 진입합니다. 
  2. 단일 지도 위젯 또는 지도 게시판 위젯을 추가합니다.
  3. 추가한 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 지도 설정(또는 지도 리스트 설정)을 클릭합니다.
  5. 지도 종류 항목에서 Google 지도를 선택합니다.

  6. 아래 그림과 같이 지도가 표시되면 정상적으로 적용된 것입니다.
    참고: 아래 그림은 단일 지도 위젯에 Google 지도를 선택한 화면입니다.

  7. 이제 단일 지도 위젯 또는 지도 게시판 위젯 도움말을 참고해 원하는 위치 또는 장소를 Google 지도에 추가해 보세요.

실수로 API 키 보호 설정을 건너뛴 경우

만약 실수로 위 2단계: API 키 보호 설정하기 과정을 건너뛴 경우, 아래의 도움말에 따라 API 키 보호 설정을 수정하고 API 키 값을 복사할 수도 있습니다.

Maps API Key API 키 보호 설정하기

  1. 왼쪽 메뉴에서 사용자 인증 정보 를 클릭합니다.

  2. API 키 항목에서 Maps API Key 의 더보기 ⋮ 아이콘을 클릭하고, API 키 수정 을 클릭합니다.

  3. 애플리케이션 제한사항 항목에서 없음 을 선택합니다.

  4. API 제한사항 항목에서 키 제한을 선택합니다.

  5. Select APIs 를 클릭합니다.

  6. Geocoding API 와 Maps JavaScript API 2개를 선택하고, 확인 을 클릭합니다.

  7. 오른쪽 상단의 API Key 항목에서 복사 아이콘을 클릭해 API 키를 복사합니다.

  8. 저장 버튼을 클릭합니다.
  9. 이제 위 설정방법의 3단계: 내 사이트에 Google 지도 API 키 적용하기 과정으로 돌아가 설정을 계속해서 진행합니다.

관련 도움말