TOKYO LITERACY

T.L.Web制作便利帖

facebook

TOP < T.L.Web制作便利帖

東京リテラシー

2013年7月19日

Google Maps API v3で各種コントロールが正常に表示されない場合の対処

Google Maps API v3で表示したマップの各種コントロールが正常に表示されないという事態に遭遇しました。
IEで見ると本来あるはずのズームコントロールが表示されてなかったり、Firefoxで見るとペグマンが棒のようにになっていたり。
検索すれば対応策が見つかるだろうと思っていたのですが、すぐに見つからず頭を悩ませることに。

map0719b
・IEだと左上に本来あるはずのズームコントロールのボタンが表示されていない。

map0719a
・Firefoxだと左上のペグマンが棒になっている。

そこで、cssの記述をいろいろと書き換えたところ、img要素に「max-width:100%;」を指定していたことが原因だということがわかりました。
レスポンシブwebデザインに対応させるため、googleマップを含むコンテンツのimg要素に「max-width:100%;」を指定してしまったのがそもそもの間違いだったようです。

最初にスクリプトの記述にミスがあるのだろうと思っていたので、予想以上に対処に時間がかかってしまいました。
同じ悩みに直面するケースはほとんどないと思いますが、検索してもすぐに解決できなかったので、備忘録がてらに書き残しておきます。

T.L.Web制作便利帖インデックスに戻る

tel
メールでのお問合せはこちら