Googleマップに影響を与えるTwitter Bootstrap CSS

Twitterブートストラップを使用しており、Googleマップを持っています。

マーカーなどのマップ上の画像が、BootstrapのCSSによって歪められています。

ブートストラップCSSには次のものがあります。

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

max-widthFirebug を使用してプロパティを無効にすると、マーカー画像が通常どおり表示されます。Bootstrap CSSがGoogleマップの画像に影響を与えないようにするにはどうすればよいですか？

Bootstrap 2.0では、これでうまくいくように見えました。

#mapCanvas img {
  max-width: none;
}

地形とオーバーレイのドロップダウンセレクターにも問題があり、両方を追加すると問題が解決します...

#mapCanvas img { 
  max-width: none;
}

#mapCanvas label { 
  width: auto; display:inline; 
} 

2番目のスタイルは、一部のブラウザーのテレインとオーバーレイボックスに関する他の問題の一種です。

マップキャンバスdivにIDを指定しmap_canvasます。

このブートストラップコミットにはmax-width: noneID の修正が含まれていますmap_canvas（ただし、では機能しませんmapCanvas）。

これらの答えはどれもうまくいかなかったので、私は自分のdivに行ってその子を見て、「gm-style」クラスの新しいdivを見つけたので、これをCSSに入れました。

.gm-style img {
    max-width: none;
  }

  .gm-style label {
    width: auto; display:inline;
  }

..それで問題が解決しました。

CSSセクションのmax-widthルールを上書きするには、max-width：none;を使用します。これはこの問題を回避する方法のようです

#MapCanvasの変更はgmap4rails gemを使用して機能しませんでしたが、

.map_container img {
    max-width: none;
}

.map_container label {
    width: auto; display:inline;
}

私はgmaps4railsを使用していますが、この修正でうまくいきました。

.gmaps4rails_map img {
    max-width: none;
}
.gmaps4rails_map label {
    width: auto; display:inline;
}

最新のTwitterブートストラップ2.0.4には、この修正が直接含まれています。

Twitterブートストラップのデモページのように、コンテンツをa（div class = "container"）でラップする場合は、style = "height：100％"を追加する必要があります

また、任意のブラウザで印刷を使用して地図を印刷することにも問題があります。これimg { max-width: 100% !important; }は上のコードでは修正されません。次の!importantように宣言を追加する必要があります。

@media print {
  img {
    max-width: auto !important;
  }
}

また、ボックスシャドウをオフにする必要があり、インクルードの順序が原因で、！importantフラグを追加しました。

#mapCanvas img {
    max-width: none !important;
    box-shadow: none !important;
}

すべての回答はmax-widht：noneでした

私にとって、max-height：継承は機能しました...

人々は＃map、＃map_canvasなどを使用しています。親のdivを見てください。青色の場合は#blue img {}