今までGoogle MapをWEBサイトに埋め込む場合（iframe埋め込みは除く）には、
- 「Google Maps APIs Premium Plan(有償版)」
- 「Google Maps APIs Standard Plan(無償版)」
の2つがありました。
この２つがGoogle Maps Platformとして1つに統合したことにより、一定の利用までは無償で、それ以降は有償になる仕様となりました。
そして2018年6月11日以降、GoogleMapが正常に表示されず、
「Googleマップが正しく読み込まれませんでした」というメッセージが表示される現象が相次いでいます。
上記のエラーとなる場合の要因は
- APIキーを利用していない場合
- APIキーを利用しているが、無償枠を超えた場合
- 請求先アカウントの登録がされていない
の3つになります。
目次
１．APIキーを利用していない場合
GoogleMap（iframe埋め込み以外）を表示させるためには、APIが必要でした。
今までは、APIキーを正しく設定していなくても地図は表示されていたのです。
が、2018年6月11日以降にはAPIキーを利用していないと
「Googleマップが正しく読み込まれませんでした」というエラーメッセージが表示される仕様になりました。
APIキーの発行は、Google Maps Platformで行う必要があります。
APIキーの発行方法
APIキーの発行の仕方は、APIキーの取得・発行について（株式会社ゼンリンデータコム）で確認してください。
APIキーを埋め込む
APIキーの発行が済んだら下記のコードをWEBサイトへ埋め込みます。
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap
※ scriptタグで挿入してください
YOUR_API_KEYの部分に発行したAPIキーを入れて<script>タグで読み込みます。
２．APIキーを利用しているが、無償枠を超えた場合
Google Maps Platformでは地図のリクエスト数に制限があります。
それを超過することで地図が表示されなくなっているのでしょう。
無償の範囲は、月間28,000マップロードとなっています。
それ以降の地図の表示には請求対象になります。
月間の無償枠を超え他場合には、料金を支払うことで地図を継続して表示させることができます。
３．請求先アカウントが登録されていない
無料枠を超えた場合、支払いをするためには請求先アカウントを作成する必要があります。
APIキーをサイトに埋め込んだはずなのに表示されない場合や、無料枠を超えるほどでもないのにエラーが出ている場合にには、「請求先アカウント」が登録されていないことが原因だと考えられます。
請求先アカウントを見作成の場合、画面上部に下記のようなバナーが出ていると思うので、「無料トライアルを試す」を押して作成してください。
請求先アカウントを登録するには、クレジットカード情報が必要になります。
請求先アカウントを登録し、プロジェクトを紐づけたらGoogleMapが正しく表示されているか確認してみましょう。
まとめ
- APIキーを利用していない場合
- APIキーを利用しているが、無償枠を超えた場合
- 請求先アカウントの登録がされていない
特に３番目の「請求先アカウントの登録」が厄介です。
APIキーを発行して埋め込んでいるのにエラーが消えない！という場合に請求先アカウントの登録を行ってみてください。
APIキーを発行していないでGoogleMapsを利用しているWEB制作の担当者の方は直ちにAPIキーを発行しましょう！
PS.
埼玉県川口市ホームページでGoogleMapの表示回数が上限に達してしまったため、エラーメッセージが表示されてしまっているようです。
アクセスの多いWEBサイトでは対策しておくべきです！
