たいした話ではないんですが、ある案件で Google Maps JavaScript API を使用した地図を Web サイト内に表示して調整しているとき、通常、デフォルトでは左上の方に表示されるコントロール UI (ズームとか操作するやつです) の表示がおかしいことに気がつきました。 で、なんでだろなと思って Web コンソールで調べてみたら、思わぬところに原因がありましたというお話。 とりあえずどういう症状が起こったかですが、下記が正しい表示。 一方で、下記が今回おかしくなっていた時の表示。コントロール UI の一部がなんか変なことになっています。 ちなみに上記のサンプルで出しているキャプチャ画像は前述した 「ある案件」 のものではなく、自分の会社のサイトで表示している地図を改めて確認したら同じ症状がでていたのでそちらのキャプチャ画像です。 img 要素に対する max-width プ
![スタイルの継承で Google Maps JavaScript API で表示した地図のコントロール UI がおかしくなった件](https://cdn-ak-scissors.b.st-hatena.com/image/square/8df24699609576d7ec18a7c69bcdbe9440d2789e/height=288;version=1;width=512/https%3A%2F%2Fhyper-text.org%2Fstatic%2Fimg%2Fogp-image.png)