Maps Embed API クイックスタート

JavaScript なしで簡単な HTTP リクエストを行うだけで、インタラクティブな地図やストリートビュー パノラマをウェブページに配置できます。

費用

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 を有効にする必要があります。

コンソール

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

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

クリーンアップ

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

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

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

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

次のステップ