bootstrap.css interfering with Google Maps InfoWindow #2410

Closed
tkompare opened this Issue Mar 5, 2012 · 24 comments

Comments

Projects
None yet

tkompare commented Mar 5, 2012

Something in bootstrap.css (v2.0.1) is interfering with Google Maps info window's display. When you click on a map point, the information bubble display is altered. For example: http://311servic.es/treetrim/ Click on any dot on the map to see what I mean. when I remove the bootstrap CSS file, Google Maps information bubbles looks correct.

Other than that, I'm loving Bootstrap.

franciso commented Mar 5, 2012

I'm seeing the exact same behaviour here.

Owner

mdo commented Mar 6, 2012

We don't have time yet to track this one down, and I'm not familiar with Google Maps at all on this level. Can you try to isolate the problem?

tkompare commented Mar 6, 2012

I'll see what I can do. I'm no CSS expert, but can fumble through it, generally. However, I will be working on a project soon with a CSS ninja and we're using Bootstrap with Google Maps in a similar fashion to what is already described. We'll definitely have to find a way around this bug then. I'll keep you posted.

gfpl001 commented Mar 6, 2012

work with t'is

#map_canvas img {
max-width: none;
}

Where your id map name #map_canvas

tkompare commented Mar 7, 2012

gfpl001's works. Fixed this issue right up. I added:

#theMap img {
    max-width: none;
}

Magic. Not sure why one has to set 'max-width'. But it works and its not a Twitter Boostrap bug. Seems more related to how Google is styling its info windows. Saw this after more internet digging: http://stackoverflow.com/questions/1554893/google-maps-api-v3-infowindow-not-sizing-correctly.

Thanks for the hint. This saved me untold hours.

tkompare closed this Mar 7, 2012

I experienced a similar problem when adding a weather layer to a Google Map http://greatname.se/marcus/weather with twitter bootstrap; besides the max-width issue i got unwanted x- and z-scrollbars in the info window for the weather info. Tracked it down to "line-height:1.231;" in the bootstrap css. Removed it and it worked out fine. Info might help someone else.

Thanks @gfpl001, that fixed my issue too.

I would suggest this as a more generic solution, although it is relying on the Google CDN url not changing. Google maps does not use any unique classes or ids that cover all images.

img[src^="http://maps.gstatic.com/"] {
    max-width: none;
}

Hello guys, I'm facing the same problem. I fixed it ok with the solution you presented, BUT, for the responsive version, on an Iphone Safari and also on an Android phone I got a problem: The infowindow itself presents OK, but the CLOSE button dont work and appear weird ... Any clue on this? Thx a lot

gfpl001 commented May 8, 2012

send a screenshot ;) but where is the close ???

Here we go. Please note that the "X" to close the infowindow is distorted.

http://risox.com/img/x.png

datasage that worked perfectly. Thanks

@marcosriso Android 3.2 browser does not seem to like max-width: none. Setting this property to "lots of pixels", i.e. max-width: 9999px, solved the problem for me.

Thank you @rboanova i will try it out

thx also solved my problem.

improving on @datasage css as images are fetched from many subdomains/domains.

img[src*="gstatic.com/"], img[src*="googleapis.com/"]  {
    max-width: 99999px;
}

Thanx for the help, fixed the problem for me as well. Glad I found this sooner rather than later.

jfmmm commented Dec 9, 2012

On my side, I had a display problem whit the zoom and streetview buttons.
http://i.imgur.com/xZ8Vw.png

This solution also fixed my problem.

Owner

cvrebert commented Feb 28, 2013

Approximate duplicate of #1506.

anas-suhaimi,

Thanks for your solution. It worked for me.

Best regards!

Thanks to @anas-suhaimi and @datasage

I do a merge of both solutions to solve the issue

<style type="text/css"> /*\* FIX for Bootstrap and Google Maps Info window styes problem *_/ img[src_="gstatic.com/"], img[src*="googleapis.com/"] { max-width: none; } </style>

Thanks again!

Thanks @retrolima this solution works for me.

mcmoe commented Jun 12, 2013

If you don't want to add the fix to the css itself you can wrap above solution in JavaScript to append dynamically when needed:

/** FIX for Bootstrap and Google Maps Info window styes problem **/
 var css = document.createElement('style');
 css.type = 'text/css';
 var styles = 'img[src*="gstatic.com/"], img[src*="googleapis.com/"] { max-width: none; }';
 if (css.styleSheet) css.styleSheet.cssText = styles;
 else css.appendChild(document.createTextNode(styles));
 document.getElementsByTagName("head")[0].appendChild(css);

Thanks to all!

danielzilli referenced this issue in cardinalcss/cardinalcss Jun 27, 2013

Closed

Fix Google Maps info window #6

rox163 commented Jul 2, 2013

Thanks for the solution. Used @retrolima 's combined version.

nmccready referenced this issue in angular-ui/angular-google-maps Oct 20, 2014

Closed

bug on infowindow only in chrome #769

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment