Bootstrap, from TwitterとGoogle Mapを同時に使うと困った件

Bootstrapがv2.0.0とGoogleMap v3で再現するんだけど、map中のアイコン画像がひしゃげて困った。

特にmarkerをdraggable: trueで使おうとするとmarkerがすげー小さくなって笑える。笑えねー。

原因はbootstrap.cssの56行目あたり

img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

のmax-width: 100%;

だから、このプロパティを上書きすればOK。

ぼくはオシャレなのでSCSSで書くと

#map_canvas {
  img {
    max-width: none;
  }
}

これで解決。

#map_canvasはgoogle mapの描画領域ですな。