Google Maps API v3 で作成したマップにて、コントロール系の要素を表示してみると、共通の画像の一部を切り取って（というか表示域を限定して）表示していることが分かる。たとえばズームコントロールの枠付の「+」アイコンならこんな感じ。

<div title="ズームイン" style="width: 23px; height: 24px; overflow: hidden; position: relative; cursor: pointer; z-index: 1;">
    <img src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png" draggable="false" style="position: absolute; left: -17px; top: -400px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
</div>

img 要素の画像ファイル（mapcnt3.png）を実際に見ればお分かりいただけると思うが、59×492 ピクセルの縦長の画像に複数の部品が配置されている。上記の例で言えば、外側の div が 23×24 ピクセルの表示域を作り、中の画像ファイルを適宜ずらして配置している。

レスポンシブデザインにおいては、img 要素に max-width: 100%; を指定してブラウザの横幅に追随させる手法がよくとられるが、これが前述のマップのコントロール系に影響を及ぼすことは見過ごされがちである。

max-width: 100%; を指定する範囲を絞るという方法もあるが、ツイート中にもあるとおりマップを内包する親要素に max-width: none; を指定するほうが確実だろう。