マップデモキーを取得して Google Maps Platform で使用する

マップデモキーは、お支払い情報を入力せずに Google Maps Platform を使用したプロトタイピングを開始できる無料の機能です。有料アカウントに移行する前に、アイデアを検証して実際に動作する様子を確認できます。このページでは、マップデモキーの仕組み、割り当て、使用できる機能、 キーの取得方法と使用方法について説明します。

注:マップデモキーは、技術的には、サポートされる機能が限定された API キーです。テストとプロトタイピングのみを目的としており、 本番環境での使用は想定されていません。また、 マップデモ プロジェクトの利用規約も適用されます。

マップデモキーで使用できる機能

マップデモキーは、Maps JavaScript API と Weather API の限定された機能セットをサポートしています。 以下に記載されていない API または機能を使用するには、マップデモキーに請求先アカウントを追加するか、新しい API キーを作成して請求を有効にする必要があります。詳しくは、 Google Maps Platform を使ってみるをご覧ください。

サポートされている Maps JavaScript API の機能

✔ サポートされている機能

  • 地図のレンダリング ロードマップ、地形図、衛星画像を使用した 2D/3D 地図。
  • マーカーとイベント マーカーと情報ウィンドウを追加し、ユーザーのクリックを処理します。
  • 地図のスタイル設定 カスタムテーマと JSON スタイルを地図に適用します。
  • Places UI キット Place Search と詳細情報の事前構築済みコンポーネント。
  • 図形描画ツール 図形とポリラインを描画してデータを可視化します。

✘ サポートされていない機能

  • Places API（新版） searchByText などのプログラムによる検索方法。
  • ルートとナビゲーション Directions Service と Distance Matrix API。
  • Address Validation 高精度の住所修正サービス。

上記の機能に加えて、マップデモキーを Weather API で使用することもできます。

マップデモキーの割り当て

マップデモキーには使用量上限が適用されます。使用量上限は変更される可能性があります。1 日の利用時間の上限に達した場合、翌日まで使用が一時停止されます。料金が発生することはありません。

マップデモキーの使用方法

ステップ 1: マップデモキーを取得する

キーを生成するには、Google アカウントでログインしていることを確認し、 [デモキーを取得する]ボタンをクリックします。 マップデモキーの利用規約に同意すると、キーが表示され、すぐに使用できるようになります 。

Google Cloud コンソールからキーを取得する方法が記載されたメールも届きます。

ステップ 2: Google Maps Platform でマップデモキーを使用する

マップデモキーは、技術的には、サポートされる機能が限定された 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>

次のステップ