ウェブサイトに Google Maps API を埋め込んだとき、稀にコントローラーのUIが崩れるなどの怪奇現象が起こることがあります。

実はコレ、単にスタイルシートの設定が原因です。

レスポンシブ対応のサイトを構築するとき、画像の大きさをウィンドウサイズに合わせて調整するために、以下のようなスタイルを使うことがあるかと思います。

img {
max-width:100%;
height:auto;
}

ポイントとなるのは max-width:100%; の箇所。

このスタイルが［Google Maps］のUIを司る画像にも継承されてしまうため、デザインが崩れる原因になるワケです。

そこで［Google Maps］の表示対象となるボックス要素内の img タグに対して max-width:none; を指定するようにしましょう。

#googlemaps img {
max-width:none;
height:auto;
}

このように max-width:none; と上書きすれば解決です。