Google Maps API v3で表示したマップの各種コントロールが正常に表示されないという事態に遭遇しました。 IEで見ると本来あるはずのズームコントロールが表示されてなかったり、Firefoxで見るとペグマンが棒のようにになっていたり。 検索すれば対応策が見つかるだろうと思っていたのですが、すぐに見つからず頭を悩ませることに。 ・IEだと左上に本来あるはずのズームコントロールのボタンが表示されていない。 ・Firefoxだと左上のペグマンが棒になっている。 そこで、cssの記述をいろいろと書き換えたところ、img要素に「max-width:100%;」を指定していたことが原因だということがわかりました。 レスポンシブwebデザインに対応させるため、googleマップを含むコンテンツのimg要素に「max-width:100%;」を指定してしまったのがそもそもの間違いだったようです。
![Google Maps API v3で各種コントロールが正常に表示されない場合の対処 | T.L.Web制作便利帖 | (株)東京リテラシー](https://cdn-ak-scissors.b.st-hatena.com/image/square/c52fce0f679fecf30fbbeab534f400e3f5a8473e/height=288;version=1;width=512/http%3A%2F%2Fwww.tokyoliteracy.co.jp%2Fblog%2Fwp-content%2Fuploads%2F2013%2F07%2Fmap0719b.jpg)