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 :




at

4 comments:

  1. Alexis MPApril 12, 2012 at 12:44 AM

    Doesn't that say something about bootstrap not being as generic as you had hoped?

    ReplyDelete
  2. Tug GrallMay 2, 2012 at 12:13 AM

    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.

    ReplyDelete
  3. أشرف صبريAugust 28, 2012 at 8:18 AM

    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

    ReplyDelete
  4. أشرف صبريAugust 28, 2012 at 8:18 AM

    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

    ReplyDelete