API キーを使用する

Google Maps Platform サービスでは、API 呼び出しを適切な認証情報を提供しているもののみに制限することで、不正使用を防止しています。これらの認証情報は API キーの形式になります。API キーとは、Google の請求先アカウントをプロジェクトや特定の API、SDK に関連付ける一意の英数字文字列です。

このガイドでは、Google Maps Platform 用の API キーを作成、制限、使用する方法について説明します。

始める前に

Maps JavaScript API のご利用にあたっては、請求先アカウントと Maps JavaScript API が有効なプロジェクトが必要です。詳しくは、Cloud コンソールでの設定をご覧ください。

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

gcloud alpha services api-keys create

API キーを制限する

アプリケーションに必要な API しか使用しないよう、API キーの使用に制限をかけておくことを強くおすすめします。API キーに制限をかけることにより、不正なリクエストからアプリケーションを守り、セキュリティを強化できます。詳しくは、API の保護に関するベストプラクティスをご覧ください。

API キーを制限する手順は次のとおりです。

コンソール

[Google Maps Platform] > [認証情報] ページに移動します。

[認証情報] ページに移動
制限を設定する API キーを選択します。選択した API キーのプロパティページが表示されます。
[キーの制限] で、次の制限を設定します。

アプリケーションの制限:

指定したウェブサイトからのリクエストを受け入れるには、[アプリケーションの制限] のリストで [HTTP リファラー（ウェブサイト）] を選択します。
リファラー（流入元）ウェブサイトを 1 つ以上指定します。ワイルドカード文字を使ってサブドメインを一括承認することも可能です（たとえば *.google.com と指定すれば、末尾が .google.com のサイトをまとめて承認できます）。https:// と http:// はそのまま指定します。他のリファラー URL プロトコルを指定する場合は特殊な記法が必要になります。たとえば file:///path/to/ は __file_url__//path/to/* と記述します。リファラーを有効化した後は、使用量が想定内で推移しているか確認しましょう。サポートされているリファラープロトコルは、about://, app://, applewebdata://, asset://, chrome://, content://, file://, ftp://, ionic://, local://, ms-appx://, ms-appx-web://, ms-local-stream://, prism://, qrc://, res://, saphtmlp:// です。

API の制限:

[キーを制限] をクリックします。
[API を選択] プルダウンから [Maps JavaScript API] を選択します。 Maps JavaScript API がリストに表示されない場合は、この API を有効にする必要があります）。
プロジェクトでプレイスライブラリを使用する場合は、[Places API] も選択します。同様に、プロジェクトで JavaScript API の他のサービス（Directions サービス、Distance Matrix サービス、Elevation サービス、Geocoding サービスなど）を使用する場合は、このリストで該当する API を有効にして、選択する必要があります。

変更が完了したら、[保存] をクリックします。

Cloud SDK

既存のキーを一覧表示します。

gcloud services api-keys list --project="PROJECT"

既存のキーに対する既存の制限を削除します。

gcloud alpha services api-keys update "projects/PROJECT/keys/KEY_ID" \
    --clear-restrictions

既存のキーに新しい制限を設定します。

gcloud alpha services api-keys update "projects/PROJECT/keys/KEY_ID" \
    --api_target="maps-backend.googleapis.com"
    --allowed-referrers="referer

詳しくは、Google Cloud SDK、Cloud SDK のインストール、および次のコマンドをご覧ください。

リクエストに API キーを追加する

すべての Maps JavaScript API リクエストに API キーを追加する必要があります。次の例では、YOUR_API_KEY を API キーに置き換えます。

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY_HERE",
    // Add other bootstrap parameters as needed, using camel case.
    // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
  });
</script>