WordPress

【WordPress】Simple Map プラグインで API Key 設定してるつもりだけど地図が表示されない!試行錯誤してようやく表示することができた手順とは

@rabirgoです。

WordPress のページに地図を埋め込もうと思った時に検索すると、必ず検索結果に出てくる Simple Map という WordPress プラグインがあります。

Google マップを簡単に埋め込むことができます。

簡単って書いてあるサイトが多いんですけど、Google の API キーというものが必要となる前の手順のようで、私にとっては手強かったです。

Simple Map プラグインインストールと Google Map API 有効化

Simple Map プラグインをインストールすると、API キーを有効にしてねって案内があります。

案内読むと簡単そうなんですけど、小2時間くらいハマりました!!

API キーを設定して [map] [/map] を使っても何も起こらない。
ぱっと見エラーも出てない。(後述の Console には出てます)

1時間調べてダメ、もう1時間やってようやく辿り着きました。

表示されない場合は「Console」で確認

API キーを設定しても Simple Map が表示されない場合、「Console」で確認してみましょう。私はこれをやってなかったので解決が遅くなりました。
(「Simple map 表示されない」などで検索してました)

Console にはこんなエラーが出てるはずです。

Console にエラーConsole にエラー

Console 表示方法は割愛します。「ブラウザ別 console 確認方法」などで検索してみてください。

今スクショ見てなぜこのキーワードで検索したか分からなくなったんですが(スクショミスしたかも)、「ApiNotActivatedMapError」で検索してこちらが解決の糸口になりました。

I'm trying to create a simple html page (I'd later like to add an autocomplete input there) that include google-places-api.I have an api-key (which is enabled) but I still get an error message.H...

ありがとう Adi, JasonS !!(回答してくれてた人)

解決手順(見直し手順)

試行錯誤してようやく、納得できる手順で見直して、解決しました。

要は「Maps JavaScript API」が有効になってなかったようです。

ちなみに、文末(おまけ)に貼りますけど最初の手順でも同内容を実施してました。うまくいかなかった理由は不明。

  1. API Key を発行したいユーザでブラウザに Google ログインした状態で、 https://developers.google.com/maps/documentation/javascript/get-api-key にアクセス
  2. 「使ってみる」を押下
  3. 「マップ」「ルート」「プレイス」にチェック(Map JavaScript API は全てに含まれてるのでどれか一つで良いような気もする)
  4. プロジェクトを選択して続行
  5. 未実施であれば請求書の有効化
  6. API キー を取得する画面に遷移する(はず)
  7. 左側の「API」を選択
  8. 「Maps JavaScript API」を選択
  9. 「有効化」を選択
  10. WordPress 管理画面で API キー を Simple Map に設定する
  11. Simple Map が正常に動作することを確認する(HTTP リファラーの設定が原因ではないことを確認しておく)
  12. ネット情報で推奨の多い、HTTP リファラーを設定しておく。手打ちが良さそう(コピペしたからかうまくいったりいかなかったり)

さいごに

正直 Google Map の共有でも困ってなかったんですが、手順共有してくれてる人がいるのに自分ができなくて、悔しかったので時間使っちゃいました。

すっきり!

おまけ:最初に実施した手順

今見直しても特に悪いところはなさそうだけどなぜダメだったのか不明です。












HTTP リファラーの設定ミス(ゴミが入ってたとか)じゃないかと思うんですが、今となっては分かりません。

ABOUT ME
rabirgo
うさぎ年(rabbit)おとめ座(virgo)生まれの rabirgo です。 2019年よりフリーランスとして活動しています。 よかったら Twitter フォローお願いします! Follow @rabirgo

COMMENT

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