トラブルシューティング

API キーと請求エラー

場合によっては、「for development purposes only」という透かし入りの、暗い地図または白黒反転のストリートビュー画像が表示されることがあります。通常、これは API キーまたは請求の設定に問題があることを示しています。 Google Maps Platform サービスを使用するには、アカウントで課金を有効にし、すべてのリクエストに有効な API キーを含める必要があります。以下のフローに従って、この問題を解決してください。

API キーを使用していますか？

わかりません。API キーを使用しているかどうか、どのように確認すればよいですか？

API キーは、URL で key パラメータとして渡され、Maps JavaScript API を読み込むために使用されます。API キーを使用しているかどうかを確認するには、いくつかの方法があります。

Chrome 拡張機能の Google Maps Platform API Checker を使用します。このツールでは、Google から付与された Maps API がウェブサイトに適切に実装されているかどうか確認できます。
ライブラリまたはプラグインを使用して Maps JavaScript API を読み込む場合は、そのライブラリの設定で API キーのオプションを確認してください。
ブラウザでエラーを確認します。次のメッセージが表示された場合は、API キーを正しく使用していません。

Google Maps JavaScript API warning: NoApiKeys
Google Maps JavaScript API error: MissingKeyMapError

ウェブデベロッパー向け:

アプリケーションのソースコードにアクセスできる場合は、Maps JavaScript API の読み込みに使用される <script> タグを探します。Maps JavaScript API を読み込む際、以下のコードの YOUR_API_KEY をお客様の API キーに置き換えます。
```
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
  </script>
```
お使いのブラウザで、ウェブサイトによって生成されたネットワークトラフィックを確認します。Chrome では、デベロッパーツールの [Network] タブを使用します。ここには、ウェブサイトから実行されたネットワークリクエストが表示されます。Maps JavaScript API を使用して実行されたリクエストは、パス maps/api/js の下に配置されます。ここでは、リクエストで key パラメータが使用されているかどうかを確認できます。[Network] タブを表示したとき、maps/api/js でネットワークトラフィックをフィルタリングすると便利です。

いいえ。API キーを使用していません。

下のボタンをクリックして、API キーを取得します。ガイド付きの設定手順が表示されない場合は、Google Maps Platform スタートガイドの手順に従ってください。
使ってみる

はい。API キーを使用しています。

では次に、プロジェクトに請求先アカウントがリンクされているか確認しましょう。

プロジェクトに請求先アカウントがリンクされていますか？

わかりません。プロジェクトに請求先アカウントがリンクされているかどうかを確認するには、どうすればよいですか？

Google Cloud Console の [お支払い] ページに移動し、API キーが作成されたプロジェクトを選択します。次の手順で、API キーがプロジェクトに関連付けられているかどうか確認します。

左側のナビゲーションバーで [Google Maps Platform] > [認証情報] を選択し、[認証情報] に移動します。
現在、ウェブサイトで使用している API キーが表示されていることを確認します。表示されない場合は、別のプロジェクトに切り替えて [認証情報] を確認します。
プロジェクトの認証情報に API キーが表示されない場合、そのプロジェクトにアクセスできなくなっている可能性があります。組織内の他のユーザーにサポートを依頼してください。元のプロジェクトが見つからない場合は、次の手順を実行します。
1. 新しいプロジェクトを作成します。そのためには、プロジェクトリストで [新しいプロジェクト] を選択するか、[リソースの管理] ページで [プロジェクトを作成] を選択します。
2. 新しい API キーを作成します。[認証情報] ページに移動し、[認証情報を作成] をクリックして、[API キー] を選択します。

Cloud Console で目的のプロジェクトを選択したら、左側のメニューで [お支払い] へ移動し、請求先アカウントがリンクされているかどうか確認します。

いいえ。プロジェクトに請求先アカウントがリンクされていません。

Cloud Console の [課金を有効にする] ページに移動し、プロジェクトに請求先アカウントを追加します。詳しくは、Google Maps Platform スタートガイドをご覧ください。

はい。請求先アカウントがプロジェクトにリンクされています。

では次に、設定したお支払い方法が有効かどうか確認しましょう。

設定したお支払い方法が無効になっていませんか（クレジットカードの期限切れなど）？

Cloud Console でお支払い方法の追加、削除、更新を行うことができます。

ご自身で設定した 1 日の API 使用量上限を超えていませんか？

使用量の予想外の増加に備え、API に 1 日あたりの上限を設定している場合、この上限を引き上げることで問題を解決できます。

1 日の上限は、Cloud Console の [API とサービス] ダッシュボードで確認できます。次の操作を行います。

確認のメッセージが表示されたら、プロジェクトを選択します。
リストから API を選択し、[割り当て] タブをクリックします。

API キーを特定の IP アドレスに制限していますか？

IP アドレスによる制限を設定している API キーは、サーバー側での使用を想定しているウェブサービス（Geocoding API やその他のウェブサービス API など）でのみ使用できます。これらのウェブサービスのほとんどは、Maps JavaScript API 内に同等のサービスがあります（Geocoding Serviceなど）。Maps JavaScript API クライアント側サービスを使用するには、別の API キーを作成し、HTTP リファラーによる制限で保護する必要があります（API キーの取得、追加、制限をご覧ください）。

コードが機能しない場合:

地図のコードが正常に動作するように、Brendan Kenny と Mano Marks はいくつかの一般的なミスとその修正方法をこの動画で指摘しています。

入力ミスを探します。JavaScript では大文字と小文字が区別されることに注意してください。
基本事項を確認します。よくある問題のいくつかは、地図の初期作成で発生します。次の点を確認してください。
- 地図のオプションで、zoom プロパティと center プロパティを指定していることを確認します。
- 地図を画面上で表示するための div 要素を宣言していることを確認します。
- 地図の div 要素に高さがあることを確認します。デフォルトでは、div 要素は高さ 0 で作成されるため非表示となります。
リファレンス実装のサンプルをご覧ください。
JavaScript Debugger（Chrome Developer Tools で使用できるものなど）を使用して、問題の特定に役立ててください。初めに、JavaScript コンソールでエラーを探します。
stackoverflow に質問を投稿します。効果的な質問の投稿方法のガイドラインについては、サポートページをご覧ください。