Googleマップが正しく読み込まれない時の対処法【原因と対策】

こんにちは！社員Aです👩

今回は「Googleマップが正しく読み込まれませんでしたと表示されてしまった時の対処法」をご紹介します。

Googleマップの埋め込みはどのサイト上でもよく見かけますし、ユーザビリティーの面からも良いと思うのですが、一部サイトで2018年6月11日以降、Googleマップが正しく読み込まれない現象が起きています。

すべてのサイトで表示されるわけではなく、ある条件が一致したGoogleマップのみこの文言が表示されてしまいますので、その原因と対策をまとめていきたいと思います。

Googleマップが正しく読み込まれませんでしたと表示されてしまう原因

まず、そもそもなぜ「Googleマップが正しく読み込まれませんでした」と表示されてしまうのかという原因からお話していきたいと思います。

実際には、Googleマップ上で下記のような表示になります。

2018年6月11日より「Google Maps API」は「Google Maps Platform」というサービスに刷新されました。

これまでのGoogle Maps APIは18種類に分かれていましたが、3種類（Maps、Routes、Places）に統合されます。

このため、APIキーを使用せずにAPIを利用しているを使用している場合、設定変更が必要です。

「APIキーを使用せずにAPIを利用している」 Google Maps を設定しているページでは、エラー文言に書き換わりました。

2018年7月16日よりGoogle MapはAPIキーを設定していても「Google Cloud Platform」で 請求先アカウントとプロジェクト(APIキー)を紐づけていないと Google Mapsが表示しなくなりました。

原因は主に下記の3点です。

1. APIキーを利用していない場合
2. APIキーを利用しているが、無償枠を超えた場合（無償の範囲は、月間28,000マップロード）
3. 請求先アカウントの登録がされていない（クレジットの登録が必須）

Googleマップを正常に表示するための対策

1.iframeで埋め込みをする

iframe埋め込みの場合は、今まで通りエラーは表示されずマップがきちんと表示されます。

正直、これが一番手っ取り早い方法です。

2.APIキーを使用せずにAPIを利用している場合

APIキーを使用せずにAPIを使用しており、今後もAPIを使用したい人向けです。

下記手順で、正しいAPIキーと支払い情報の登録が必要になります。

1. 「Google Maps Platform」ページ内にある「使ってみる」をクリック
2. 手順に従い、プロジェクトを作成
3. APIキーの取得
4. 支払い情報（クレジットカード）の登録
5. 取得したAPIキーを地図表示部分に適用

まとめ

私は基本的にはiframeでGooglemapを埋め込みしますが、色などプラグインでカスタマイズしたい時にAPIキーを発行して使用しています。

アクセス数がそれほど多くないサイトの場合は、無料枠内で使用ができるようなのでその点は心配しなくて良さそうです。

また、やっぱりいちばん簡単で安全なのは、iframeでの埋込だと実感しました。