Maps デモキーを取得して Maps JavaScript API で使用する

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

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

Maps デモキーで利用できる機能はどれですか？

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

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

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

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

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

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

上記の機能に加えて、Maps Demo Key を Weather API で使用することもできます。詳細については、マップデモキーを取得して Weather API で使用するをご覧ください。

Maps デモキーの割り当て

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

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

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

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

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

ステップ 2: Maps JavaScript API で Maps デモキーを使用する

Maps Demo Key は、技術的には限られた機能セットをサポートする API キーです。Maps デモキーは、サポートされている Maps JavaScript API の機能または Weather API の標準 API キーの代わりに使用できます。次の例は、基本的な地図で Maps デモキーを使用する方法を示しています。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>

次のステップ