Google Maps API V3：奇妙なUI表示の不具合（スクリーンショット付き）

グーグルマップの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デザイナーはこのスタイルを使用していました：

style.css

img {max-width: 100%; }

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

style.css：

#map_canvas img { max-width: none; }

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

「imgmax-width：100％」の設定は、ブラウザのサイズが変更されたときに画像のサイズが比例して変更されるように、レスポンシブ/流動的なWebサイトのデザインで採用されている手法です。どうやらいくつかのcssグリッドシステムはデフォルトでこのスタイルの設定を開始しました。流体画像の詳細については、こちらをご覧ください：http：//www.alistapart.com/articles/fluid-images/ これがGoogleマップと競合する理由がわかりません...

グーグルマップAPIの最新バージョンでは、これが必要です：

<style>
  .gm-style img { max-width: none; }
  .gm-style label { width: auto; display: inline; }
</style>

ズームコントロールに問題があるようです。zoomControl:falseオプションに追加してみてください。

実際、通常のズームスライダーはページの左側に配置されているようです（Firebug>要素の検査を使用）。CSSの競合である可能性がありますか？

さて私はこれの修正を得ました：

CSSに次のようなものを追加しました：

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

それをグローバルにしないようにしてください、そしてそれはあなたを修正するはずです:)

これは私のために働いた：

#map img { max-width: none !important; } (from Patrick's answer)

属性「！important」は、他のスタイルを確実にオーバーライドします。＃mapは、新しいオブジェクトGmapsを宣言するときに割り当てられるIDです。

<script>
    map = new GMaps({
          div: '#map',           <-  your id
          lat:  *******,
          lng:  *******,
          scrollwheel: false,
          panControl: true,
          ....
          ...
</script>

Dreamweaver流体グリッド機能を使用している場合、デフォルトの設定は次のようになります。

img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

これを試して：

object, embed, video {
    max-width: 100%;
}
#map_canvas img { max-width: none; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

コードをそのまま置き換えるだけです。

ブートストラップ（バージョン2.3.2以降）は、受け入れられた回答と同じ方法で画像を混乱させます。

実際、ハロルドのウェブサイトで使用されているデザインはブートストラップを使用しているのではないかと思います。

Bootstrapについて誰も言及しておらず、誰かがBootstrap固有のソリューションを探している可能性があるため、これを投稿しています。

SquareSpaceのWebサイトでこの問題が発生しました。CSSスタイルシートにアクセスできませんでした。HTMLドキュメントを埋め込んでいるので、インラインCSSを使用するだけで問題を解決できます。サイト全体を変更する代わりに、コンテナーのスタイルを変更しました（これはできませんでした）。これが私がしたことです：

<style>
  html, body, #map-canvas {
    height: 600px;
    width: 100%;
    margin: 0px;
    padding: 0px
  }
  #map-canvas img {max-width: none;}
</style>