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

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

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

지도 데모 키로 사용할 수 있는 기능은 무엇인가요?

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

지원되는 Maps JavaScript API 기능

✔ 지원되는 기능

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

✘ 지원되지 않는 기능

  • Places API (신규) searchByText와 같은 프로그래매틱 검색 메서드입니다.
  • 경로 및 내비게이션 Directions 서비스 및 Distance Matrix API입니다.
  • Address Validation 높은 정확도의 주소 수정 서비스입니다.

위에 나열된 기능 외에도 Weather API와 함께 지도 데모 키를 사용할 수 있습니다. 자세한 내용은 지도 데모 키 가져오기 및 Weather API와 함께 사용하기를 참고하세요.

지도 데모 키 할당량

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

지도 데모 키를 사용하는 방법

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

키를 생성하려면 Google 계정으로 로그인되어 있는지 확인하고 데모 키 가져오기 버튼을 클릭합니다. 지도 데모 키 약관에 동의하면 키가 표시되고 바로 사용할 수 있게 됩니다.

Google Cloud 콘솔에서 키를 가져오는 방법에 관한 안내가 포함된 이메일도 수신됩니다.

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

지도 데모 키는 기술적으로 제한된 기능 집합을 지원하는 API 키입니다. 지원되는 Maps JavaScript API 기능 또는 Weather 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>

다음 단계