*

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

広告

  関連記事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

広告

  Message

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

広告

Googleマイビジネスの投稿機能にカテゴリー追加やその他アップデート

Googleマイビジネスにある投稿機能が新たに「最新情報」「イベント」と「クーポン」というカテゴリー

Googleマイビジネスに新機能!ビジネスの説明文と開業日を入れることが可能に

マイビジネスでビジネスの説明文と開業日を入力することが可能になりました。 ビジネスの説明文については

Googleマイビジネスのインサイト機能の更新!経路リクエストがより詳細に

Googleマイビジネスのインサイト機能にあるルートをリクエストがより詳細な情報がわかるように、Go

Googleマイビジネス市区町村枠の消滅

2018年2月28日にマイビジネスの住所の管理画面が少しだけ変更されました。 今まで住所を入れる際は

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

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