Reputation: 4174
I am new in bootstrap twitter my version is 2.3.2 and after including google maps into my site, google maps controls went to invisible, i made a search for this issue and everything I found it didnt work for me: this code fixed the layout of controls but they still are untouchable
#map-canvas img { max-width: none ; max-height:none; }
#map-canvas label { width: auto; display: inline; }
also the dropdown menu right is deformed
<div class="span9">
<div id="map-canvas"></div>
</div>
Upvotes: 2
Views: 1986
Reputation: 19618
From bootstrap docs (http://getbootstrap.com/getting-started/#third-parties):
If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of * { box-sizing: border-box; }. Previously, you may have also ran into issues with the use of max-width on images. The following snippet should avoid all those problems.
/* Fix Google Maps canvas
*
* Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
* global `box-sizing` changes. You may optionally need to reset the `max-width`
* on images in case you've applied that anywhere else. (That shouldn't be as
* necessary with Bootstrap 3 though as that behavior is relegated to the
* `.img-responsive` class.)
*/
.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }
/* Optional responsive image override */
img { max-width: none; }
Upvotes: 3