JavaScript なしで簡単な HTTP リクエストを行うだけで、インタラクティブな地図やストリートビュー パノラマをウェブページに配置できます。
費用
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 を有効にする必要があります。
コンソール
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 ファイルをパソコンからブラウザにドラッグして、ウェブブラウザで読み込みます。ほとんどのオペレーティング システムでは、ファイルをダブルクリックしても同じ操作を行えます。
これで完了です。Maps Embed API を使用して地図を設定し、作成しただけです。
クリーンアップ
Google Cloud プロジェクトを削除すると、そのプロジェクト内で使用されているすべてのリソースに対する課金を停止できます。
- Google Cloud コンソールで [リソースの管理] ページに移動します。
- 削除するプロジェクトが組織に接続されている場合は、ページの上部にある組織リストを選択して開きます。
- プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
- ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。
次のステップ
Google Cloud プロジェクトを設定して、Maps Embed API を使った開発を開始します。
iframe に追加できるその他のパラメータとオプションの一覧については、以下をご覧ください。
JavaScript API を使用してマップ プロジェクトを拡張します。