Maps Embed API クイックスタート

シンプルな操作でウェブページ上にインタラクティブな地図やストリートビュー パノラマを配置できます。 HTTP リクエスト。JavaScript は不要です。

料金

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

始める前に

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

ステップ 1

コンソール

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

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

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

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

Cloud SDK

gcloud projects create "PROJECT"

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

ステップ 2

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 キーは、プロジェクトに関連付けられたリクエストを認証し、リクエストの使用回数を追跡して課金するために使われる一意の識別子です。少なくとも 1 つの API キーをプロジェクトに関連付ける必要があります。

API キーを作成するには:

コンソール

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

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

  2. [認証情報] ページで、[認証情報を作成] > [API キー] をクリックします。
    [API キーを作成しました] ダイアログで、新しく作成された API キーが表示されます。
  3. [閉じる] をクリックします。
    新しい API キーは、[認証情報] ページの [API キー] に一覧で表示されます。
    （本番環境で使用する前に必ず API キーを制限するようにしてください）

Cloud SDK

gcloud alpha services api-keys create \
    --project "PROJECT" \
    --display-name "DISPLAY_NAME"

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

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 ファイルをパソコンから ブラウザまたはファイルをダブルクリックすると OS です。

これで完了です。これで、 Maps Embed API

クリーンアップ

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

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

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

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

次のステップ