Web制作

「Googleマップが正しく読み込まれませんでした。」時の対処法-2019年6月

Googleマップが正しく読み込まれませんでした。

ホームページ、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>

対応作業は、以上です。

  • このエントリーをはてなブックマークに追加

中小企業・小規模ビジネスのオーナーさま、 Webのお悩み、誰に相談していますか?

【無料相談】ホームページの悩みを相談したい方は他にいませんか?
今なら相談特典として「Web活用7つの質問集」をプレゼントしています。

今すぐ無料相談