Skip to main content

Twitter Boostrap 2 and Google Maps

· One min read

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:

<div id="resultriMap" />

You just need to add a new style to your page with the following definition:

<style>
#resultriMap img {    max-width: none;}
</style>

After adding this to my page the map is correctly printed as you can see in the following screenshot :