@rabirgoです。
WordPress のページに地図を埋め込もうと思った時に検索すると、必ず検索結果に出てくる Simple Map という WordPress プラグインがあります。
簡単って書いてあるサイトが多いんですけど、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 確認方法」などで検索してみてください。
今スクショ見てなぜこのキーワードで検索したか分からなくなったんですが(スクショミスしたかも)、「ApiNotActivatedMapError」で検索してこちらが解決の糸口になりました。
ありがとう Adi, JasonS !!(回答してくれてた人)
解決手順(見直し手順)
試行錯誤してようやく、納得できる手順で見直して、解決しました。
要は「Maps JavaScript API」が有効になってなかったようです。
ちなみに、文末(おまけ)に貼りますけど最初の手順でも同内容を実施してました。うまくいかなかった理由は不明。
- API Key を発行したいユーザでブラウザに Google ログインした状態で、 https://developers.google.com/maps/documentation/javascript/get-api-key にアクセス
- 「使ってみる」を押下
- 「マップ」「ルート」「プレイス」にチェック(Map JavaScript API は全てに含まれてるのでどれか一つで良いような気もする)
- プロジェクトを選択して続行
- 未実施であれば請求書の有効化
- API キー を取得する画面に遷移する(はず)
- 左側の「API」を選択
- 「Maps JavaScript API」を選択
- 「有効化」を選択
- WordPress 管理画面で API キー を Simple Map に設定する
- Simple Map が正常に動作することを確認する(HTTP リファラーの設定が原因ではないことを確認しておく)
- ネット情報で推奨の多い、HTTP リファラーを設定しておく。手打ちが良さそう(コピペしたからかうまくいったりいかなかったり)
さいごに
正直 Google Map の共有でも困ってなかったんですが、手順共有してくれてる人がいるのに自分ができなくて、悔しかったので時間使っちゃいました。
すっきり!
おまけ:最初に実施した手順
今見直しても特に悪いところはなさそうだけどなぜダメだったのか不明です。
HTTP リファラーの設定ミス(ゴミが入ってたとか)じゃないかと思うんですが、今となっては分かりません。