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

コンソール

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

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

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

次のステップ