Wednesday, April 11, 2012

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.
For example in my case the div for my map is define as:

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 :