web技術 ツール

このページでは Google マップが正しく読み込まれませんでした。が出た場合

Google Mapを見るとこんなエラーが表示されていました。
2018年7月16日以降でAPIが有効になっていない、アクセスが多く無料枠を超えた場合に起こるそうです。
2018年7月16日以降でAPIが有効になっていない、アクセスが多く無料枠を超えた場合に起こるそうです。

対応方法

2つの手順が必要になります。
どちらもGoogleにログインする必要があります。

1.クレジットカードの登録
https://payments.google.com/#paymentMethods
クレジットカードの登録が必須となります。登録方法は今回割愛。

2.APIの取得
今回説明する部分です。
https://console.cloud.google.com/?hl=ja

左上の「プロジェクトの選択」をクリックします。

右上の「新しいプロジェクト」を押します。

プロジェクト名をつけます。

ホームに戻り、先程の「プロジェクトの選択」をクリックします。その後左メニューから「APIとサービス」を選択します。
ホームに戻り、先程の「プロジェクトの選択」をクリックします。その後左メニューから「APIとサービス」を選択します。

APIとサービスの有効化をクリックします。
APIとサービスの有効化をクリックします。

Maps JavaScript APIを選択します。
Maps JavaScript APIを選択します。

有効にします。
左メニューを表示し、APIとサービス>認証情報をクリックします。

左メニューを表示し、APIとサービス>認証情報をクリックします。
認証情報を作成>APIキー を押します。

認証情報を作成>APIキー を押します。
認証情報を作成>APIキー を押します。

APIキーが現れます。
APIキーが現れます。

APIキーの制限を行い、セキュリティを強化しましょう。「キーの制限」をクリックします。
APIキーの制限を行い、セキュリティを強化しましょう。「キーの制限」をクリックします。

HTTPリファラーを選択して、https://*.example.com/*の形で登録します。
以上です。

-web技術, ツール