ノノログ

ホーム / ブログ / baserCMS / baserCMSでGoogleMapが動かない 〜 解決法

baserCMSでGoogleMapが動かない 〜 解決法

baserCMSの3.0.10をインストールしたら「エラーが発生しました。このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」と表示され、デフォルトのテーマの地図が表示されなかったのでブログ書きました。

なぜ表示されないか

2016年6月22日から、Google Mapsを利用する場合はAPIキーが必須になったようです。
この変更は、過去のサイトの場合キー無しでアクセスが可能であり、新しくサイトを作った場合に必要なようです。

そのためキーが必要ないことを前提としたbaserCMSのGoogle Mapsを利用するヘルパが動作しない状態になっていました。

どうやれば解決するか

baserCMSのコア改修が必要なのですが、とりあえず動かないとどうしょうもないのでパッチをプラグインで作成しました。

  1. プラグインのインストール
  2. APIキーの取得
  3. プラグインの設定でAPIキーの登録

を行うことでマップが表示されます。

プラグインのインストール

githubにて公開していますのでZipでダウンロードしてbaserCMSのプラグインフォルダにぶち込めばいいと思います。

https://github.com/gondoh/GoogleMapsApiKeyPacher

GoogleMapsApiKeyPacherというフォルダ名にしてください

※ 管理画面からプラグインのインストールを忘れずに

APIキーの取得

Googe APIs Consoleにて取得可能です。

https://console.developers.google.com/

参考になるサイトがありましたのでこの辺りを見てみて下さい。

https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja
http://nendeb.com/276
https://syncer.jp/google-maps-javascript-api-matome

プラグインの設定でAPIキーの登録

Google APIs Consoleにて払いだされたAPIキーを下記画像のように設定して、キャッシュの削除を行えばOK。

以上でOKです。
そのうちコアに対しても改修を(誰かが)入れると思います。

不具合等あればTwitter上で教えてください。
ちなみに「注: 設定が有効になるまで、最大で 5 分かかることがあります らしいのでご注意を。