*

3分で解決できる!GoogleマップのAPIキーが正しく読み込めない場合の取得方法

      2017/09/22

2016年6月22日付で、GoogleマップAPIを新しく使いはじめる方ははAPIキーが必須になるようになりました。
http://googlegeodevelopers.blogspot.jp/2016/06/building-for-scale-updates-to-google.html

今回は取得方法と解決方法をご紹介します。

エラーの内容

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

はい、意味不明ですね(笑)

僕も正直APIとかに関しては素人なのでよくわかりません。
とりあえず、JavaScriptコンソールというので確認してみましょう。

JavaScriptコンソール

IEでは F12 ChromeではCtrl+Shift+Jで開くことができます。Firefoxは調べてません。

開いていただくと、エラーが表示されていると思います。
赤文字でGoogle Maps API error:MissingKeyMapErrorと記述されていれば、Google mapのAPIキーが不足しているということですね。

Google Maps API error:MissingKeyMapError修正方法

まずはウェブ向け Google Maps API  |  Google Developersへアクセスしてください。

右上のキーを取得より進んでいただき新しいプロジェクトを作成してください。

新規で作成したばかりの場合は下記のように権限がないと表記されてしまうかもしれません。

その場合はブラウザーを更新していただければ大丈夫です。

名前部分にホームページ名などをいれ、
*.example.com/*と表記されている場所に同じ記述方法でドメインを入れてください。
なお*(アスタリスク)はワイルドカードです。

記述例

wwwなどがある場合は
*.example.com/*

wwwない場合は
example.com/*

manaBizの場合はwwwをつけていないので
example.com/*で登録します。

入力が完了したら作成を押すとAPIキーが出力されます。
これでGoogle map APIキーの取得は完了です。

Google Map APIキーを設定する

サイト内に記述されているGoogle Map APIを読み込むJavaScriptにAPIキーを追加します。
基本的には  〜内に入れることが多いです。

と記述されている部分に

?key=APIキーを追加記述してください。

もし、?sensor=trueや?language=jaなどのパラメーターがある場合はを使用せずを使用して

のように記述してください。

これで、APIキーの設定は完了になります。

2016年6月22日以前に作った地図については

現状は設定が必要ないようです。
APIキーは一度設定が不必要になっていたものですが、今回から新しく作る際は必須になっていますので、注意してください。

 -Google Map

広告

  関連記事

Google Maps for iPhoneがマイマップ対応に!

世間では、Googleのロゴが新しくなったり、アプリダウンロードのインターステーシャルをモバイルラン

誤って消してしまったマイマップを復旧サポートしてもらえるようになりました

長い時間をかけて、せっかく作ったマイマップを誤って消してしまい、途方にくれたことはありませんか? G

Goolgeマイマップをドライブで開くと400エラーで開くことが出来ない

5月の中旬からGoogleドライブより、マイマップを開くと 400. That’s an error

Google マップの色がアップデート!地図の配色や機能の追加

2017年11月17日UPDATE  Googleマップがアイコンや色をアップデート予定!専用のアイ

Googleマップのスター(お気に入り)が消えてしまった時の対処法

Googleマップで一度行った場所や、よく行く場所などをお気に入り(スター)登録することはよくあるこ

【2017.06.15】iframeで埋め込んだ地図が表示されないバグか?

Googleマップから地図を埋め込んだ場合、表示されないと行ったトラブルが起きてしまっているようです

Google マップのレビューに評価機能実地テストか

Googleマップの口コミに対して、役にたちましたか? といいねマークの実地テストを行っているのを偶

【11/4】Google Mapアップデート情報 for iPhone

11/4付けGoogle Mapアプリがアップデートを行いましたね。 どうやら渋滞情報アラートが飛ぶ

Googleマップがアイコンや色をアップデート予定!専用のアイコンやアイコンの表示優先度の設定変更

去年の7月に大幅な色のアップデートを行ったGoogleマップですが、先日公式ブログでさらなるアップデ

【2017/02/27】iPhone版Googleマップアプリ Ver.4.28にてスターが消えてしまうバグが発生中

2月24日にアップデートされた、iPhone版 Googleマップアプリ バージョン4.28にて、お

広告

  Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

広告

Googleマップがアイコンや色をアップデート予定!専用のアイコンやアイコンの表示優先度の設定変更

去年の7月に大幅な色のアップデートを行ったGoogleマップですが、先日公式ブログでさらなるアップデ

マイビジネスの口コミを別のリスティングに移動する方法

お店の移転などで、新しくGoogleマイビジネスを登録してしまうと、過去に書かれた口コミなどがなくな

ローカル検索枠に広告表示の開始か

去年のSMXで追加されると話にあった、ローカル検索枠への広告表示が開始された可能性がでてきました。

Googleマイビジネスで「読み込めません」と表示されている原因

ここ1週間で、Googleマイビジネスを開くと 一部のリスティングに「読み込めません」と表示がされて

Googleマイビジネスで簡易ウェブサイトが無料で作れるようになりました。

Googleマイビジネスで簡単なウェブサイトが作れるようになりました。 Google の新サービス「