グーグルマップがおかしくなっていた

「Googleマップが正しく読み込まれませんでした」というメッセージが表示されて、アクセスマップがエラーになっていた。調べるとグーグルのサービス変更に伴って、どうやら6月11日から駄目になっていたらしい。API キーの取得と表記が必須になったらしいが、支払方法とか要求されるので、この際にマップ埋め込み（iframe）に替えることにした。埋め込み自体は簡単だったが、縦横サイズの設定が上手く行かずに手こずった。画面比率を定めるのにpadding-top: 56.25%;なんて設定しろというのだが、これを素直に100％にすることで解決。因みにこのCSSを削除すると地図は表示されない。試しに150%にしたら縦長になったが、PCページでは少しやり過ぎなので125%に決定。そもそもiframe側で事前にサイズ指定しているのだが、これを変更しても全然反映されないのが理解出来ないが、今回は結果オーライということでここまでとした。