Google map埋込apiでペグマンの画像が消えて表示されなくなった時のcss対処法

2018.12.12 IT/web

先日、web制作でgoogle map apiを使って、デザインを白黒にカスタマイズした地図を埋め込みしていたところ、ご指摘を頂き、とあることに気づきました。

・・・。

・・・。

ん？

ぺ、ペグマンがいない・・・！

ペグマンが消えた原因

最初、BASIC認証やhttps通信をしていない開発環境だから？などと考えていたのですが、もう少し調べてみたら、原因はcssにありました。

こちらが、エラーが出ていた時のソースです。（画面が小さくて見づらくて申し訳ない。）

で、この時、cssでimgをwidth:100%;に設定していたのですが、これをwidth:auto;の初期値に戻してあげると……

ペグマンが無事に復活しました！

このように、googlemapを埋込するIDの部分ではimageの横幅指定を誤ると、ペグマンがいなくなってしまうエラーが起きてしまう可能性がありますので、気をつけましょう。

まとめ

google map apiを使っていて、ペグマンのアイコン画像が消えてしまった時は、cssのimgの横幅を見直してみましょう。解決に繋がるかもしれません！