Twitter Boostrap 2 and Google Maps
Like many developers I am using Twitter Boostrap for my Web applications. Using this framework has been very helpful for me, since I am really not a good HTML/CSS developer. For now, on my site Resultri I am using the default look and feel, will customize it later.
Lately, I wanted to integrate Google Map to my application, and when testing it, I had the bad surprise to see that the Controls and WindowInfo are not printed correctly as you can see in the screen shot below:
This is not a big issue at all, just a conflict on the img tag and its style (max-width) coming from Twitter Bootstrap. The quick fix :
- override the style of the img tag for the div that contains your map.
You just need to add a new style to your page with the following definition:
After adding this to my page the map is correctly printed as you can see in the following screenshot :
4 comments:
Doesn't that say something about bootstrap not being as generic as you had hoped?
Hi Alexis,
Hmm, no so far Twitter Bootstrap has been generic enough for my project(s). This is the first time I have to "tweak" it, and it was not hard at all.
So it is the best HTML "framework" that I have used so far. Simple and Powerful with a good look and feel... everything I need.
Thank you. This was very useful.
It's not just twitter bootstrap. Other html reset style sheets cause the same distortion to google maps.
See this:
https://github.com/twitter/bootstrap/issues/1552
Thank you. This was very useful.
It's not just twitter bootstrap. Other html reset style sheets cause the same distortion to google maps.
See this:
https://github.com/twitter/bootstrap/issues/1552
Post a Comment