<p dir="auto">Displaying Google Maps inside a Bootstrap layout gives some problems.</p>
<p dir="auto">Check out the examples below.</p>
<p dir="auto"><a href="http://jsbin.com/evuduw/" rel="nofollow">http://jsbin.com/evuduw/</a> (master - bad)</p>
<p dir="auto"><a href="http://jsbin.com/evuduw/3" rel="nofollow">http://jsbin.com/evuduw/3</a> (2.0-wip -- looks fixed)</p>
<p dir="auto">The maps look okay, but if you try and switch the view to terrain or enable/disable "show labels" in the first the layout of the dropdown inside Google Maps looks quirky.</p>
<p dir="auto">When a "bare bones" Google Map is embedded on a Bootstrap-styled page inside a grid row &amp; span, the terrain drop-down menu gets pushed off the side of the map:</p>
<p dir="auto"><a href="http://imagebin.org/index.php?mode=image&amp;id=174078" rel="nofollow">http://imagebin.org/index.php?mode=image&amp;id=174078</a></p>
<p dir="auto">The satellite drop-down menu is similarly affected when 2 entries are present, but looks normal when only 1 entry is present:</p>
<p dir="auto"><a href="http://imagebin.org/index.php?mode=image&amp;id=174079" rel="nofollow">http://imagebin.org/index.php?mode=image&amp;id=174079</a></p>
<p dir="auto"><strong>Removing the Bootstrap CSS link from the page</strong> (i.e. displaying the map un-styled) <strong>restores normal behavior.</strong></p>
<p dir="auto">This behavior observed in Chrome 14.0.835.186 and Firefox 3.6.22 on Ubuntu 10.04.</p>