*

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マップがアイコンや色をアップデート!専用のアイコンやアイコンの表示優先度の設定変更

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

マイマップが消えた?→実は消えていません。

5月のゴールデンウィーク中にGoogleのサービスであるマイマップが消えてしまうという事案が起きてい

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

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

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

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

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

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

【2017.01.04】Googleマップ拒否済になってしまってストリートビューに表示されない理由…

あけましておめでとうございます。 今年度も程々に更新していきますので何卒よろしくお願いいたします。

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

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

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

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

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

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

マイマップにインポートができない事例が発生中(解決済み)

先週末(10月9日)頃より、マイマップへCSVファイルやxlsxファイルがインポートできないという報

広告

  Message

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

広告

Google マイビジネスで動画をアップロードすることができるようになりました。

GoogleマイビジネスのコミュニティマネージャーであるAllyson Wright氏がGoogle

マイビジネスで作成したウェブサイトを削除する方法

2017年6月よりGoogleマイビジネスは無料でビジネスウェブサイトを作れるようになりました。 G

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

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

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

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

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

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