ホームページ、WebサイトにGoogleマップを読み込んでいる場合、2019年6月以降で表示されるようになったエラー文章「このページでは、Googleマップが正しく読み込まれませんでした。」と表示される時の対処法をまとめておきます。
Googleマップが読み込まれなくなった理由
2019年6月に、Google Maps APIがGoogle Maps Platformに移行したことに伴って、PIキーの取得設置とクレジットカード登録が必要となったです。
クレジットカード登録！？費用がかかるの？
カード情報を登録したらすぐに請求が来るわけではなく、月額200ドルまでは無料（2019年7月に登録した場合には300ドルまで無料でした）で、単純に地図を表示するだけであれば、月に100,000ロードまでは無料のため、一般的な中小企業サイトであれば無料範囲です。
もし210ドル分のロードがあった場合には、追加の10ドルだけ請求されます。
対処方法
必要なもの
・Googleアカウント
・クレジットカード情報
・FTP（ホームページのソースを書き換える必要がある）
APIキーの取得と設置方法
１、Googleにログインした状態で、下記へ移動（Google Cloud Platoform）
https://console.cloud.google.com/
２、「プロジェクトの選択」 ＞ 「新しいプロジェクト」を選択
プロジェクト名などは管理しやすいように任意で作成
３、左メニューの「APIとサービス」＞「ライブラリ」
「Maps JavaScript API」を選択し、有効にする。
４、左メニューの「APIとサービス」＞「認証情報」と選択
「認証情報を作成」を選択すると、APIキーを選択すると、キーが発行される。
*自分のキーをコピーしておく
５、不正利用を防ぐためにAPIキーの利用制限の設定
「キーを制限」を選択し、必要な設定を行う。
Webサイトで利用するのであれば、
アプリケーションの制限を「HTTPリファラー」に設定し、
使用するWebサイトのURLを指定する。
６、左メニューの「お支払い」から支払い情報として
クレジットカードを登録。
＊支払い情報を登録したからすぐに請求が来るわけではなく、
月額200ドルまでは無料で、単純に地図を表示するだけであれば、
月に100,000ロードまでは無料。
7、APIキーの設置（HTMLソースコードの書き換え）
ページのヘッダー(又はフッター 又はbody内)に
Google Maps用のScriptを読み込むコードを記入。
＊key=XXXXXXXXXXXXX”に、取得したAPIキーを入力。
APIキー無し(従来の書き方)例１
<script src="https://maps.googleapis.com/maps/api/js"></script>
APIキー無し(従来の書き方) 例２
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script>
↓ ↓ ↓
APIキー有り（これに書き換え）
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX"></script>対応作業は、以上です。
