[解決済み] Google Maps API V3 : 奇妙なUI表示の不具合 (スクリーンショット付き)

質問

Google マップの UI コンポーネントでこの奇妙な不具合を引き起こしている原因について何かお心当たりのある方は、ぜひご連絡ください!

でマップが作成されます。

        var options = {
        zoom: <?php echo $this->zoom ?>,
        center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP                
        }; 

        var map = new google.maps.Map(document.getElementById('map_canvas'), options);

となり、マーカーがない状態でも不具合は同じです。

解決方法は？

同じような問題にぶつかりました。 cssデザイナーはこのスタイルを使っていました。

スタイル.css

img {max-width: 100%; }

ズームコントロールを無効にする代わりに、map_canvas 要素の img スタイルを次のようにオーバーライドすることで問題を解決しました。

style.css を使用します。

#map_canvas img { max-width: none; }

ズームコントロールが正しく表示されるようになりました。

img max-width:100%" を設定することは、ブラウザのサイズを変更したときに画像が比例してリサイズされるように、レスポンシブ/フルイド Web サイト デザインで採用されるテクニックです。いくつかのCSSグリッドシステムは、デフォルトでこのスタイルを設定するようになったようです。 フルードイメージの詳細については、こちらをご覧ください。 http://www.alistapart.com/articles/fluid-images/ なぜこれがグーグルマップと衝突するのかよく分かりませんが...。