지도 데모 키를 가져와 Maps JavaScript API와 함께 사용

지도 데모 키는 결제 정보를 입력하지 않고도 Google Maps Platform으로 프로토타입 제작을 시작할 수 있는 무료 기능입니다. 유료 계정을 사용하기 전에 아이디어를 검증하고 실제로 작동하는지 확인하세요. 이 페이지에서는 지도 데모 키의 작동 방식, 할당량, 사용할 수 있는 기능, 키를 획득하고 사용하는 방법을 설명합니다.

참고: 지도 데모 키는 기술적으로 제한된 기능 집합을 지원하는 API 키입니다. 테스트 및 프로토타입 제작용으로만 사용해야 하며 프로덕션용으로 설계되지 않았습니다. 지도 데모 프로젝트 서비스 약관도 적용됩니다.

지도 데모 키로 어떤 기능을 사용할 수 있나요?

지도 데모 키는 제한된 Google Maps Platform 기능 및 서비스를 지원합니다. 아래에 나열되지 않은 API 또는 기능을 사용하려면 지도 데모 키에 결제 계정을 추가하거나 새 API 키를 만들고 결제를 사용 설정해야 합니다. 자세한 내용은 Maps JavaScript API 설정을 참고하세요.

Maps JavaScript API

  • 지도 렌더링 위성 및 지형 뷰로 2D/3D 지도를 로드합니다.
  • 마커 및 이벤트 마커와 정보 창을 추가하고 사용자 클릭을 처리합니다.
  • 지도 스타일 지정 지도에 맞춤 테마와 JSON 스타일을 적용합니다.
  • 장소 UI 키트 장소 검색 및 세부정보를 위한 사전 빌드 구성요소입니다.
  • 그리기 도구 도형과 폴리라인을 그려 데이터를 시각화합니다.
  • 장소 클래스 * 전 세계 수백만 개의 장소에 대한 위치 데이터를 가져옵니다.

Web Service API

  • Maps Grounding Lite Google 지도의 지리 공간 데이터로 AI 애플리케이션을 그라운딩합니다.
  • Places API (신규) * 전 세계 수백만 개의 장소에 대한 위치 데이터를 가져옵니다.
  • Geocoding API v4 주소 또는 장소 ID를 좌표로 변환합니다.
  • 경로 계산 두 위치 간의 최적 경로를 가져옵니다.
  • Weather API 포괄적인 날씨 정보를 가져옵니다.

* 사용자 제출 사진 및 리뷰와 같은 사용자 제작 콘텐츠는 지도 데모 키를 통해 사용할 수 없습니다.

지도 데모 키 할당량

지도 데모 키에는 변경될 수 있는 사용량 한도가 적용됩니다. 일일 한도에 도달하면 다음 날까지 사용이 일시중지되며 요금이 청구되지 않습니다.

지도 데모 키 사용 방법

1단계: 지도 데모 키 가져오기

키를 생성하려면 Google 계정으로 로그인한 후 데모 키 받기 버튼을 클릭하세요. 지도 데모 키 약관에 동의하면 키가 표시되며 바로 사용할 수 있습니다.

Google Cloud 콘솔에서 키를 가져오는 방법이 안내된 이메일도 전송됩니다.

2단계: Maps JavaScript API와 함께 지도 데모 키 사용

지도 데모 키는 제한된 기능 집합을 지원하는 API 키입니다. 지원되는 기능 및 서비스에서 표준 API 키 대신 지도 데모 키를 사용할 수 있습니다.

다음 예에서는 기본 요청과 함께 지도 데모 키를 사용하는 방법을 보여줍니다. YOUR_DEMO_KEY를 방금 검색한 키로 바꿉니다.

<html>
<head>
  <title>Add a Map using HTML</title>
  <link rel="stylesheet" href="./style.css" />
  <script type="module" src="./index.js"></script>
</head>
<body>
  <gmp-map
    center="38.7946,-106.5348"
    zoom="4"
    map-id="DEMO_MAP_ID"
    style="height: 400px"
  >
  </gmp-map>
  <!--
    The `defer` attribute causes the script to execute after the full HTML
    document has been parsed. -->
  <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_DEMO_KEY&libraries=maps"
    defer
  ></script>
</body>
</html>

다음 단계