Maps Embed API クイックスタート

HTTP リクエストを使用して、インタラクティブな地図やストリートビュー パノラマをウェブページに配置できます。カスタム JavaScript は必要ありません。

料金

Maps Embed API リクエストはすべて、使用量の上限なく、料金なしでご利用いただけます。ただし、すべてのリクエストには有効な Google Cloud API キーが必要です。詳細については、使用量と課金をご覧ください。

始める前に

ウェブページに埋め込み地図を作成するには、次の必須の設定手順を完了します。

ステップ 1: プロジェクトを設定する

Console

  1. Google Cloud コンソールの [プロジェクトの選択] ページで [新しいプロジェクト] をクリックし、新しい Cloud プロジェクトの作成を開始します。

    [プロジェクトの選択] ページに移動

  2. Cloud プロジェクトで お支払いが有効になっていることを確認します。

    Google Cloud では、無料トライアルを提供しています。トライアルは、90 日が経過するか、アカウントの費用が 300 ドルに達した時点のいずれか早い方の時点で終了します。解約はいつでも可能です。詳しくは、請求先アカウントのクレジットおよび Google Maps Platform の料金をご覧ください。

Cloud SDK

gcloud projects create "PROJECT"

詳しくは、Google Cloud SDK、Cloud SDK のインストール、および以下のコマンドをご覧ください。

ステップ 2: API または SDK を有効にする

Google Maps Platform を使用するには、プロジェクトで使用する API または SDK を有効にする必要があります。

Console

Maps Embed API を有効にする

Cloud SDK

gcloud services enable \
    --project "PROJECT" \
    "maps-embed-backend.googleapis.com"

詳しくは、Google Cloud SDK、Cloud SDK のインストール、および以下のコマンドをご覧ください。

ステップ 3: API キーを取得する

このステップでは API キーを作成します。本番環境で API キーを使用する場合は、キーの使用を制限することを強くおすすめします。詳しくは、各サービスの API キーの使用ページをご覧ください。

API キーは、使用量と課金のためにプロジェクトに関連付けられたリクエストを認証する固有識別子です。少なくとも 1 つの API キーをプロジェクトに関連付ける必要があります。 新しいキーを作成する場合、または既存のキーに API や SDK を追加する場合は、次の手順に沿って操作します。

Console

  1. [Google Maps Platform] > [キーと認証情報] ページに移動します。

    [キーと認証情報] ページに移動

  2. プロンプトが表示されたら、プロジェクトを選択します。

  3. 次のいずれかを行います。

    • 新しい鍵を作成する:

      1. [認証情報を作成] > [API キー] をクリックします。
      2. [API キーの作成] パネルで、[API の制限の選択] リストを開きます。
      3. このキーに必要のない API をすべてオフにし、[Maps Embed API] が選択されたままになっていることを確認します。
      4. [作成] をクリックします。パネルに新しい API キーが表示されます。

    • 既存の鍵を使用する:

      1. 鍵の名前をクリックします。
      2. [API の制限を選択] リストで、[Maps Embed API] を選択します。
      3. [保存] をクリックします。

    ここで API を選択しても、API は有効になりません。API ライブラリ ページで Maps Embed API が有効になっていることを確認します。

  4. 後で鍵文字列を表示するには、[鍵と認証情報] ページに移動し、鍵の [鍵を表示] をクリックします。

コンソールの表示がこれらの手順と異なる場合は、Google Cloud ドキュメントの API キーを作成すると API 制限を追加するをご覧ください。

Cloud SDK

次のコマンドで、PROJECT_ID をプロジェクト ID に置き換えます。

  • 新しい鍵を作成する: 次のコマンドを実行します。DISPLAY_NAME は鍵の名前に置き換えます。

    gcloud services api-keys create \
    --project="PROJECT_ID" \
    --display-name="DISPLAY_NAME" \
    --api-target=service=maps-embed-backend.googleapis.com

    詳しくは、Google Cloud SDK、Cloud SDK のインストール、および以下のコマンドをご覧ください。

  • 既存の鍵を使用する: 次のコマンドを実行します。KEY_ID は鍵の ID に置き換えます。--append フラグは、キーですでに許可されている API を保持します。このフラグを指定しない場合、コマンドはそれらを置き換えます。

    gcloud services api-keys update KEY_ID \
    --project="PROJECT_ID" \
    --append \
    --api-target=service=maps-embed-backend.googleapis.com

    詳しくは、Google Cloud SDK、Cloud SDK のインストール、および以下のコマンドをご覧ください。

    鍵 ID は、鍵文字列や表示名ではありません。これを確認するには、gcloud services api-keys list --project="PROJECT_ID" を実行します。ID は name フィールドの最後の部分（projects/PROJECT_NUMBER/locations/global/keys/KEY_ID）です。

鍵文字列を表示するには、gcloud services api-keys get-key-string KEY_ID --project="PROJECT_ID" を実行します。

iframe の生成

次のオプションをクリックして、場所と API キーを追加し、ウェブページ用の iframe を生成します。その他のパラメータとオプションについては、地図を埋め込むをご覧ください。

iframe のテスト

HTML ブラウザ ウィンドウで iframe を表示するには:

  1. デフォルトのテキスト エディタを開きます。デバイスには、TextEditや Microsoft Windows メモ帳などのテキスト エディタがデフォルトでインストールされているはずです。
  2. HTML ファイルを作成し、index.html という名前を付けます。

  3. 上記で生成した iframe を使用して、次のコードを追加します。

    <html>
  <!-- Replace this code comment with your iframe. -->
</html>

  4. index.html HTML ファイルを保存します。

  5. HTML ファイルをパソコンからウェブブラウザにドラッグして、ブラウザで読み込みます。ほとんどのオペレーティング システムでは、HTML ファイルをダブルクリックしても同じ操作が可能です。

これで完了です。Maps Embed API を使用して地図を設定し、作成しました。

クリーンアップ

Google Cloud プロジェクトを削除して、プロジェクト内で使用しているすべてのリソースへの課金を停止できます。

  1. Google Cloud コンソールで、[リソースの管理] ページに移動します。

    [リソースの管理] ページに移動

  2. 削除するプロジェクトが組織に関連付けられている場合は、ページ上部の組織リストを選択して展開します。
  3. プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
  4. ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

次のステップ