GoogleMapを埋め込んでいる人は必見！突然のエラーに要注意！

初めまして！
10月からインファクト京都officeでインターンシップをしている滝沢です。
これからブログを掲載していきますので、よろしくお願いします！

今回の記事では、お馴染みGoogle MapをWebサイトで表示する際の留意点についてお話します。

Google Mapの突然のエラー表示

今年6月から「Google Maps API」を使用している一部のウェブサイトにおいて、地図の表示エラーが発生する事象が見受けられるようになりました。具体的にはグレーのフィルターが地図にかかって薄暗く表示されるようになり、「このページではGoogleマップが正しく読み込まれませんでした。」というエラー表示です。

では、この原因は一体何だったのでしょうか…？

エラー表示の原因はGoogle Maps Platformの料金変更

今まで無料だったものが…

Google Maps Platformの料金変更にともない、GoogleマップのAPI機能を利用するためには請求アカウントと紐づけられたAPIキーが必須になりました。

APIとは？

APIとはアプリケーションプログラムインターフェイスの略です。
WEB上にソフトウェアの一部を公開することによって機能の一部を自分のソフトウェアと組み合すことができるのがAPIです。
今回の場合はWordPressでGoogleマップのAPIを利用していて、請求アカウントと紐づけられたAPIキーを入れていなかったことによりエラーが表示されてしまいました。
APIキーとはAPIを利用するためのコードのことです。

では自身のサイトがAPIを利用してGoogle Mapを使用している場合、エラーを防ぐためにもどんな対応策をとれば良いのでしょうか？

該当サイトはAPI認証キーの確認を！

マップの表示には何が必要？

今年の７月以前までは、新規サイトでGoogle Mapを使用する際APIキーを保持さえしていれば、難なく表示が可能とされていました。それが７月以降、「Google Cloud Platform」で請求先アカウントとAPIキー（プロジェクト）を紐付けていないと、今までは表示されていたものも表示されなくなってしまいました。さらに、マップの表示作業を完了するためには、埋め込みコードの修正も必須となりました。

APIの登録方法

登録時に必要なもの：

• Googleアカウント（サイト所有者のものが理想）
• クレジットカード
• ブラウザ（できればChrome）

登録はこちらから→Google Cloud Platform

支払い情報が紐づいたAPIキーを取得するためにはクレジットカードを登録する必要があります。
登録には30分から1時間ほどかかります。

 

おわりに

今回はサイトにGoogle Mapが表示されない原因についてご紹介させていただきました。
Web担当者は担当しているサイトでGoogle Maps APIを使用している場合、請求アカウントと紐づけられたAPIキーが設定されているかどうかを確認することをオススメします！
具体的な対策方法は後日ご紹介いたします！