ホームページ、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キーの取得と設置方法
1、Googleにログインした状態で、下記へ移動(Google Cloud Platoform)
https://console.cloud.google.com/
2、「プロジェクトの選択」 > 「新しいプロジェクト」を選択
プロジェクト名などは管理しやすいように任意で作成
3、左メニューの「APIとサービス」>「ライブラリ」
「Maps JavaScript API」を選択し、有効にする。
4、左メニューの「APIとサービス」>「認証情報」と選択
「認証情報を作成」を選択すると、APIキーを選択すると、キーが発行される。
*自分のキーをコピーしておく
5、不正利用を防ぐためにAPIキーの利用制限の設定
「キーを制限」を選択し、必要な設定を行う。
Webサイトで利用するのであれば、
アプリケーションの制限を「HTTPリファラー」に設定し、
使用するWebサイトのURLを指定する。
6、左メニューの「お支払い」から支払い情報として
クレジットカードを登録。
*支払い情報を登録したからすぐに請求が来るわけではなく、
月額200ドルまでは無料で、単純に地図を表示するだけであれば、
月に100,000ロードまでは無料。
7、APIキーの設置(HTMLソースコードの書き換え)
ページのヘッダー(又はフッター 又はbody内)に
Google Maps用のScriptを読み込むコードを記入。
*key=XXXXXXXXXXXXX”に、取得したAPIキーを入力。
APIキー無し(従来の書き方)例1
<script src="https://maps.googleapis.com/maps/api/js"></script>
APIキー無し(従来の書き方) 例2
<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>
対応作業は、以上です。