특정 상황에서는 '개발 전용'이라는 워터마크가 표시된 어두운 지도 또는 '음화' 스트리트 뷰 이미지가 표시될 수도 있습니다.
이 동작은 일반적으로 API 키 또는 청구 관련 문제를 나타냅니다.
Google Maps Platform 제품을 사용하려면 계정에서 결제를 사용 설정해야 하고 모든 요청에 유효한 API 키를 포함해야 합니다. 다음 단계에 따라 이 문제를 해결할 수 있습니다.
API 키를 사용하고 있나요?
잘 모르겠습니다. API 키를 사용 중인지 어떻게 확인할 수 있나요?
API 키는 Maps JavaScript API를 로드하는 데 사용되는 URL의 key 매개변수로 전달됩니다. 다음 방법으로 API 키를 사용하고 있는지 확인할 수 있습니다.
브라우저에서 웹사이트가 생성한 네트워크 트래픽을 확인합니다.
Chrome에서는 DevTools네트워크 탭을 사용하여 네트워크 트래픽을 확인할 수 있습니다.
여기에 웹사이트에서 요청한 네트워크 요청이 표시됩니다. Maps JavaScript API를 사용하여 한 요청은 maps/api/js 경로 아래 표시됩니다.
여기에서는 요청이 key 매개변수를 사용하는지 확인할 수 있습니다.
네트워크 탭을 볼 때 maps/api/js를 기준으로 네트워크 트래픽을 필터링하면 도움이 될 수도 있습니다.
예기치 않은 사용량 증가를 방지하기 위해 API에 일일 한도를 설정한 경우 일일 한도를 늘려 이 문제를 해결할 수 있습니다.
Cloud 콘솔의 API 및 서비스 대시보드로 이동하여 일일 한도를 확인할 수 있습니다. 이 대시보드로 이동한 후 다음 단계를 따르세요.
메시지가 표시되면 프로젝트를 선택합니다.
목록에서 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으로 생성되므로 표시되지 않습니다.
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-05-08(UTC)"],[[["To use the Google Maps JavaScript API, you must include an API key and enable billing for your project."],["If you see a darkened map or a negative Street View image watermarked with \"for development purposes only\", you might have an issue with your API key or billing."],["Troubleshooting steps involve verifying your API key implementation, checking billing account attachment, ensuring billing method validity, and reviewing daily usage limits and IP restrictions."],["This page offers solutions to common billing and API errors, and links to resources for further assistance."]]],["Using the Maps JavaScript API requires a valid API key and enabled billing. Issues like a darkened map typically stem from these. Verify API key usage via browser checks, source code, or network traffic. Ensure the project linked to your API key has an active billing account. Check for invalid payment methods or exceeded API daily limits. If restricted by IP address, create a key with HTTP referrers. Troubleshoot by checking for typos, verifying map element properties, or using a JavaScript debugger.\n"]]