Tug’s Blog

My journey in Big Data, Hadoop, NoSQL and MapR

Twitter Boostrap 2 and Google Maps

| Comments

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:

1
<div id="resultriMap" />

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

1
2
3
4
5
6
7
<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 :

Comments