シンプルな操作でウェブページ上にインタラクティブな地図やストリートビュー パノラマを配置できます。 HTTP リクエスト。JavaScript は不要です。
料金
すべての Maps Embed API リクエストは、 無制限の使用量です。ただし、すべてのリクエストで有効な Google Cloud API キーが必要です。詳細については、使用量と課金をご覧ください。
始める前に
ウェブページ上に埋め込み地図を作成するには、 各タブをクリックして
ステップ 1
コンソール
-
Google Cloud コンソールの [プロジェクトの選択] ページで [新しいプロジェクト] をクリックし、新しい Cloud プロジェクトの作成を開始します。
-
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 を有効にする必要があります。
Console
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 キーを作成するには:
コンソール
-
[Google Maps Platform] > [認証情報] ページに移動します。
-
[認証情報] ページで、[認証情報を作成] > [API キー] をクリックします。
[API キーを作成しました] ダイアログで、新しく作成された API キーが表示されます。 -
[閉じる] をクリックします。
新しい 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 を表示するには:
- デフォルトのテキスト エディタを開きます。次のようなテキスト エディタが必要です。 TextEdit または Microsoft Windows のメモ帳 インストールされています。
- HTML ファイルを作成し、名前を
index.html
にします。 上記で生成した iframe に次のコードを追加します。
<html> <!-- Replace this code comment with your iframe. --> </html>
index.html
HTML ファイルを保存します。HTML ファイルをパソコンからウェブブラウザにドラッグして、ブラウザで読み込みます。ほとんどのオペレーティング システムでは、HTML ファイルをダブルクリックしても同じ操作が可能です。
これで完了です。これで、 Maps Embed API
クリーンアップ
Google Cloud プロジェクトを削除して、プロジェクト内で使用しているすべてのリソースへの課金を停止できます。
- Google Cloud Console で、[リソースの管理] ページに移動します。
- 削除するプロジェクトが組織に関連付けられている場合は、 組織リストからアクセスできます。
- プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
- ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。
次のステップ
Maps Embed API を使った開発を始めるには、 Google Cloud プロジェクト:
iframe に追加できるその他のパラメータとオプションのリストは次のとおりです。
Javascript API を使用して地図プロジェクトを拡張します。