みなさんこんにちは。むらたてつろうです。
多くのウェブサイト内にGooglemapが設置されています。
Googlemapの埋め込みは、お問い合わせ設置フォームと並ぶくらいご要望の多い作業です。
ところが先日、Googlemap設置作業で見事にハマり、30分と見込んだ作業が２日かかってしまいました。
カスタマイズ内容は、設置するサイトのトーンを合わせて青くすることとアイコンを指定のものに変更すること、というシンプルなもの。カスタマイズのテンプレートは豊富にあり簡単な作業のはずでした。
ところが、「このページではGoogleマップが正しく読み込まれませんでした」のエラー表示。
APIキーはサイト毎に新しく発行しないといけないので、今回作成した際に何か手順に間違いがあったのでしょうか。
もしくはマップを表示させるサイトのURLが間違えているんだろうと仮説を立てました。
自分で設定したURLは、●●.com/ （テスト環境用）と●●.jp/ （本番用）でした。
改めて書き方の参考を見てみると「/」（スラッシュ）の後ろに「*」（アスタリスク）がついていたので、
●●.com/* （テスト環境用）
●●.jp/* （本番用）
と書き換えてみました。
トップページ以外、下層ページも全部含まれるという指示のために「*」（アスタリスク）が必要なのかな？と思ったわけです。
設定保存の際に、「設定が有効になるまで最大で５分かかることがあります」と書かれていたので、作業を一旦中断し、メールの確認や、ファイルの整理等別のことをし反映を待ちました。
ところが、自信満々で再読み込みをしてもまた同じエラー。
キャッシュかと思いシークレットモードで確認するもまたエラー。
その後もURLにhttp://をつけてみたりと、思いつく限り試してみましたがダメでした。
納期が迫っていたわけでは無かったので、1日経てば思いがけない閃きがあるかもしれねいと思い、１日寝かすことにしました。
そして閃いたのです。
APIを使うGoogleマップにはクレジットカードの登録が必要ですが、10月にカードが新しくなったので情報が古いのでは…。
もうこれに間違い無いと確信したのですが、確認したらカード情報は新しいものに変更してある。
もう、お手上げ寸前。
改めてGoogleの管理画面を1つ１つ確認していると、新しく作ったプロジェクトの請求先アカウントが設定されていないことが判明。
まさかこれが原因なのか？
即請求先アカウントを設定すると、マップが表示されました！
APIキー発行は請求先を決めてからじゃないと取得できないようにしてくれればいいのに。そうぼやくしかありませんでした。
