Google Mapに「このページではGoogle マップが正しく読み込まれませんでした。」と表示されたときの対処法。

以前「御社のホームページは大丈夫？6/11(PST)からGoogle Mapが利用できなくなる可能性」の記事で掲載したとおり、Google Maps APIがGoogle Maps Platformに移行したことに伴い、有効なAPIキーを利用していないWebサイトのGoogle Mapに「このページではGoogle マップが正しく読み込まれませんでした。」と表示され地図が正しく表示されなくなっています。今回再度APIキーの取得方法についてご案内いたしますので参考にしてください。

APIキーの取得

APIキーを取得するにはGoogleアカウントが必要です。まずGoogleアカウントを作成したら、「Google Cloud Platoform」へアクセスします。アクセスしたら、「プロジェクトの選択」をクリックして「新しいプロジェクト」を選択します。 プロジェクト名などは管理しやすいように任意で作成してください。

プロジェクトを作成したら、左メニューの「APIとサービス」→「ライブラリ」と選択してください。ここで「Maps JavaScript API」を選択し、有効にしてください。

次に左メニューの「APIとサービス」→「認証情報」と選択してください。そして「認証情報を作成」を選択してください。この時点でAPIキーは発行されます。

最後に不正利用を防ぐためにAPIキーの利用制限の設定を行います。「キーを制限」を選択し、必要な設定を行ってください。
Webサイトで利用するのであれば、アプリケーションの制限を「HTTPリファラー」に設定し、使用するWebサイトを指定することをお勧めします。 これでAPIキーの取得は完了です。

最後に左メニューの「お支払い」から支払い情報としてクレジットカードを登録すればGoogle Mapが表示されるようになります。支払い情報を登録したからすぐに請求が来るわけではなく、月額200ドルまでは無料で使用できますし、月の利用量を制限することも可能です。ただ単純に地図を表示するだけであれば、月に100,000ロードまでは無料で使用できるので一般的な中小企業のWebサイトであれば十分無料枠で収まるかと思います。参考にして利用してみてください。