Maps Embed API クイックスタート

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

インタラクティブな HTTP マップまたはストリートビュー パノラマを簡単な HTTP リクエストでウェブページに配置します。JavaScript は必要ありません。

費用

Maps Embed API リクエストはすべて、使用量の上限なく、料金なしでご利用いただけます。詳しくは、使用量と課金をご覧ください。

始める前に

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

ステップ 1

Console

  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 SDKCloud 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 SDKCloud 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 SDKCloud SDK のインストール、および以下のコマンドをご覧ください。

iframe の生成

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

iframe のテスト

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

  1. デフォルトのテキスト エディタを開きます。デバイスにはデフォルトで TextEditMicrosoft 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 Console で [リソースの管理] ページに移動します。

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

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

次のステップ

  • Maps Embed API を使って開発を始めるには、Google Cloud プロジェクトを設定します。

    Cloud Console で設定する

  • iframe に追加できるパラメータとオプションのリストは次のとおりです。

    地図を埋め込む