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

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

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

クリーンアップ

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

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

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

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

次のステップ