Maps Embed API クイックスタート

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

費用

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

始める前に

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

ステップ 1

コンソール

  1. Google Cloud Console の [プロジェクトの選択] ページで [新しいプロジェクト] をクリックし、新しい 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 を有効にする必要があります。

コンソール

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 キーを作成するには:

コンソール

  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 のテスト

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

  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 Console で [リソースの管理] ページに移動します。

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

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

次のステップ