Google Map 和 Bootstrap 冲突的地方

今天遇到一个诡异的问题(其实以前就遇到了,被我想办法绕开了):

在Google Map里添加一个Marker,如果Marker能够被拖动(draggable),就显示不正常。表现为一个1/3宽度的图标带2个阴影,拖动后变成1/4大小的图标。

反复尝试都无法解决,去查看了Gmap的源码,发现大家是一样的,也没能解决。最后还是Google之!

原来是Bootstrap的问题,它为了不让图片撑开容器,在样式里规定img { max-width: 100%};,就是这句话导致图片被压缩(应该是默认占据更宽的位置,好显示阴影之类的东西)。

修改我的样式,增加.map-container img { max-width: none; }之后,就一切正常了。