新規サイト制作時のGoogle Maps「エラーが発生しました」は、APIキーが原因。

新規でサイトを制作していて、Googleマップを入れようとしたらなんどやっても下記のようなエラーが出てしまった。

エラーが発生しました。
このページではGoogleマップが正しく読み込まれませんでした。JavaScriptコンソールで技術情報を確認ください。

新規サイトでGoogle Mapsを使用する場合はAPIキーが必須。

今までと同じように入れてるし、今までのサイトはちゃんと表示されている。前まではローカルでインストールしたWordPressでもちゃんとGoogleマップ表示されてたのになぁ、なんて思っていたら、実は2016年6月22日から新規サイトでGoogle Mapsを使用する場合はAPIキーが必須になったとのこと。

Geo Developers Blog
http://googlegeodevelopers.blogspot.jp/2016/06/building-for-scale-updates-to-google.html

Google Maps APIs Standard Plan Updates
https://developers.google.com/maps/pricing-and-plans/standard-plan-2016-update

2016年6月22日より前に公開されたサイトはAPIキーがなくても地図はちゃんと表示されています。
なんだ、じゃあAPIキーを取得しないと。

まずはGoogleアカウントがない場合はGoogleアカウントを取得してください。

Google Maps APIs for Webへ移動し、「キーを取得」をクリックします。
https://developers.google.com/maps/web/

「Google Maps ウェブ APIをアクティベートする」と表示されますので「続ける」をクリック。

デフォルトでは、「My Project」という名前で自動的にプロジェクトが作成されます。

「すべてのサービスと関連APIについて、適用される利用規約を遵守して利用することに同意します」のラジオボタンを「はい」にして、「同意して続行」をクリック。
「新機能のお知らせ、パフォーマンスに関する〜」は私は「いいえ」にしました。

すると「プロジェクト「My Project」を作成しています…」と下部に表示され、作成中の状態になります。

上記のような画面になりますので、空欄にURLを記入して「作成」をクリックします。*.example.com/*とすることで、example.com内のすべて取得するAPIキーを利用できます。
自信のサイトで利用したい環境下を設定します。

無事、APIキーが取得できました。

2016年6月22日より前は

<script src="https://maps.googleapis.com/maps/api/js"></script>

と記載していたはずですが、
今後は

<script src="https://maps.googleapis.com/maps/api/js?key=ここにAPIキーを入れる"></script>

とこのようにすれば今までと同じように地図が登録したドメイン下で表示されるようになりますよ！

コメント

プロフィール

bbpはWEBデザインと輸出入の仕事をしてます。趣味程度のブログです。キュレーションへの投稿、ページのいいねとシェアに喜びます。