문제 해결

알림: Maps JavaScript API를 사용하려면 다음 단계를 따르세요.

• 모든 Maps JavaScript API 요청에는 API 키를 포함해야 합니다. 키 없는 액세스는 더 이상 지원되지 않습니다.
• 각 프로젝트에서 결제를 사용 설정해야 합니다.

API 키 및 결제 오류

특정 상황에서는 '개발 전용'이라는 워터마크가 표시된 어두운 지도 또는 '음화' 스트리트 뷰 이미지가 표시될 수도 있습니다. 이 동작은 일반적으로 API 키 또는 청구 관련 문제를 나타냅니다. Google Maps Platform 제품을 사용하려면 계정에서 결제를 사용 설정해야 하고 모든 요청에 유효한 API 키를 포함해야 합니다. 다음 단계에 따라 이 문제를 해결할 수 있습니다.

API 키를 사용하고 있나요?

잘 모르겠습니다. API 키를 사용 중인지 어떻게 확인할 수 있나요?

API 키는 Maps JavaScript API를 로드하는 데 사용되는 URL의 key 매개변수로 전달됩니다. 다음 방법으로 API 키를 사용하고 있는지 확인할 수 있습니다.

• Google Maps Platform API Checker Chrome 확장 프로그램을 사용합니다. 이 프로그램을 사용하면 웹사이트에서 Google의 라이선스가 부여된 지도 API를 제대로 구현하고 있는지 확인할 수 있습니다.
• 라이브러리 또는 플러그인을 사용하여 Maps JavaScript API를 로드하는 경우 해당 라이브러리의 설정을 확인하고 API 키 옵션을 찾아보세요.
• 브라우저에서 오류를 확인합니다. 다음 메시지가 표시되면 API 키를 올바르게 사용하고 있지 않은 것입니다.
• Google Maps JavaScript API 경고: NoApiKeys
• Google Maps JavaScript API 오류: MissingKeyMapError

웹 개발자의 경우:

• 애플리케이션의 소스 코드에 액세스할 수 있는 경우 Maps JavaScript API를 로드하는 데 사용되는 <script> 태그를 찾아보세요. Maps JavaScript API를 로드할 때 아래 코드에서 YOUR_API_KEY를 API 키로 대체합니다.

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

• 브라우저에서 웹사이트가 생성한 네트워크 트래픽을 확인합니다. Chrome에서는 DevTools 네트워크 탭을 사용하여 네트워크 트래픽을 확인할 수 있습니다. 여기에 웹사이트에서 요청한 네트워크 요청이 표시됩니다. Maps JavaScript API를 사용하여 한 요청은 maps/api/js 경로 아래 표시됩니다. 여기에서는 요청이 key 매개변수를 사용하는지 확인할 수 있습니다. 네트워크 탭을 볼 때 maps/api/js를 기준으로 네트워크 트래픽을 필터링하면 도움이 될 수도 있습니다.

아니요. API 키를 사용하고 있지 않습니다.

API 키를 가져오려면 아래 버튼을 클릭하세요. 설정 단계가 표시되지 않으면 Google Maps Platform 시작하기의 전체 안내를 따르세요.
시작하기

예. API 키를 사용하고 있습니다.

좋습니다. 계속하여 결제 계정이 프로젝트에 연결되어 있는지 확인하세요.

결제 계정이 프로젝트에 연결되어 있나요?

잘 모르겠습니다. 결제 계정이 프로젝트에 연결되어 있는지 확인하려면 어떻게 해야 하나요?

Google Cloud 콘솔의 결제 페이지로 이동하여 API 키가 생성된 프로젝트를 선택합니다. 키가 프로젝트와 연결되어 있는지 확인하려면 다음 단계를 따르세요.

1. Google Maps Platform > 사용자 인증 정보 아래 왼쪽 사이드바에서 액세스할 수 있는 사용자 인증 정보 섹션으로 이동합니다.
2. 현재 웹사이트에서 사용하는 API 키가 등록되어 있는지 확인합니다. 그렇지 않은 경우 다른 프로젝트로 전환하여 사용자 인증 정보를 확인합니다.
3. API 키의 프로젝트를 찾을 수 없으면 더 이상 이 프로젝트에 액세스하지 못할 수도 있습니다. 조직의 다른 사용자에게 도움을 요청하세요. 원래 프로젝트를 찾을 수 없으면 다음 단계를 따르세요.
   1. 새 프로젝트를 만듭니다. 프로젝트 목록에서 새 프로젝트를 선택하거나 Resource Manager 페이지를 통해 프로젝트 만들기를 선택하면 됩니다.
   2. 새 API 키를 만듭니다. 새 API 키는 사용자 인증 정보 페이지에서 만들 수 있습니다. 이 페이지로 이동한 후 사용자 인증 정보 만들기를 클릭한 다음 API 키를 선택합니다.

Cloud 콘솔에서 프로젝트를 찾은 후 왼쪽 사이드 메뉴의 결제 섹션으로 이동하여 결제 계정이 연결되어 있는지 확인하세요.

아니요. 결제 계정이 프로젝트에 연결되어 있지 않습니다.

Cloud 콘솔에서 결제 사용 설정 페이지로 이동하여 프로젝트에 결제 계정을 추가합니다. 자세한 내용은 Google Maps Platform 시작하기를 참고하세요.

예. 결제 계정이 프로젝트에 연결되어 있습니다.

좋습니다. 제공된 결제 수단이 유효한지 확인해 보세요.

제공된 결제 수단이 더 이상 유효하지 않은가요(예: 신용카드가 만료됨)?

Cloud 콘솔에서 결제 수단을 추가, 삭제 또는 업데이트할 수 있습니다.

API에 직접 적용한 일일 한도를 초과했나요?

예기치 않은 사용량 증가를 방지하기 위해 API에 일일 한도를 설정한 경우 일일 한도를 늘려 이 문제를 해결할 수 있습니다.

Cloud 콘솔의 API 및 서비스 대시보드로 이동하여 일일 한도를 확인할 수 있습니다. 이 대시보드로 이동한 후 다음 단계를 따르세요.

1. 메시지가 표시되면 프로젝트를 선택합니다.
2. 목록에서 API를 선택한 다음 할당량 탭을 클릭합니다.

API 키에 IP 주소 제한이 있나요?

IP 주소 제한이 있는 API 키는 서버 측에서 사용할 웹 서비스(예: Geocoding API 및 기타 Web Service API)와 함께만 사용할 수 있습니다. 이러한 웹 서비스 대부분에는 Maps JavaScript API 내에 동일한 서비스가 있습니다(예: 지오코딩 서비스 참고). Maps JavaScript API 클라이언트 측 서비스를 사용하려면 HTTP 리퍼러 제한으로 보호할 수 있는 별도의 API 키를 만들어야 합니다 (API 키 가져오기, 추가하기, 제한하기 참고).

코드가 작동하지 않는 경우:

지도 코드를 작성하고 실행하는 데 도움이 되도록 Brendan Kenny와 Mano Marks가 다음 동영상에서 일반적인 실수 및 해결 방법을 알려줍니다.

• 오타를 찾습니다. JavaScript는 대소문자를 구분하는 언어입니다.
• 기본 사항을 확인합니다. 처음 지도를 만들 때 가장 일반적인 문제가 발생하는 경우가 있습니다. 예를 들면 다음과 같습니다.
  • 지도 옵션에서 zoom 및 center 속성을 지정했는지 확인합니다.
  • 화면에 지도를 표시할 div 요소를 선언했는지 확인합니다.
  • 지도의 div 요소에 높이가 있는지 확인합니다. 기본적으로 div 요소는 높이가 0으로 생성되므로 표시되지 않습니다.
  참조 구현의 예를 참고하세요.
• Chrome 개발자 도구에서 제공하는 디버거와 같은 JavaScript 디버거를 사용하여 문제를 식별합니다. 먼저 JavaScript 콘솔에서 오류를 찾아보세요.
• Stack Overflow에 질문을 게시합니다. 적절한 질문을 게시하는 방법에 관한 가이드라인은 지원 페이지를 확인하세요.