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

 WEBデザイン    1,174

 

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

このエントリーをはてなブックマークに追加

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

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

1

新規サイトで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キーを取得しないと。

スポンサーリンク

2

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

3

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

4

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

6

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

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

7

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

9

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

10

無事、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>

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

スポンサーリンク

コメント

プロフィール

bbb

WEBデザインと輸出入業してます。海外関連、グルメ関連をメインに記事にしています。キュレーションへの投稿、ページのいいねとシェアに喜びます。個人事業の方を応援します!

I'm web designer, and export-import business also. Feel free you can add me on Facebook

 https://www.facebook.com/bbp.jp