How not to spoil the style when using css frameworks

Question

I am using the Google Maps API V3 with Twitter Bootstrap and this is what I got. The marker cannot be recognized as a marker, and the zoom tool is missing.

Twitter boostrap seems to mess up the styling of the map canvas, is there a way to exclude an element from the styles with a specific structure? Or just simply reset the style on just the map canvas so that it doesn't fall into the stylesheet for the twitter boot buffer?

Here is some code other than the style from twitter bootstrap:

<style type="text/css"> html { height: 100% } body{ height: 100%; margin: 0; padding: 0 } </style> 

Answer 1

I believe this is due to them, adding

 img{ max-width: 100%; } 

Suggested fix:

 #mapContainer img{ max-width: none; } 

see here https://github.com/twitter/bootstrap/issues/1552

[update]

It looks like release 2.0.4 should fix this problem (I haven't tried this just through change.log)

http://blog.getbootstrap.com/2012/06/bootstrap-2-0-4-released/

Answer 2

I had the same issue with Bootstrap + Google Maps . I assume that you are using additional CSS files (added to your files after loading), so in order to "overwrite" this style in the images contained in the #map container, just use something like the code below in your own CSS files :

 #mapContainer img{ max-width: none; } 

Just like a sub-character. It worked for me.

Hope this helps you.