Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bootstrap.css interfering with Google Maps InfoWindow #2410

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

Comments

Projects
None yet
@tkompare
Copy link

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

This comment has been minimized.

Copy link

franciso commented Mar 5, 2012

I'm seeing the exact same behaviour here.

@mdo

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Author

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

This comment has been minimized.

Copy link

gfpl001 commented Mar 6, 2012

work with t'is

#map_canvas img {
max-width: none;
}

Where your id map name #map_canvas

@tkompare

This comment has been minimized.

Copy link
Author

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 tkompare closed this Mar 7, 2012

@marcusasplund

This comment has been minimized.

Copy link

marcusasplund commented Apr 6, 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.

@goldcaddy77

This comment has been minimized.

Copy link

goldcaddy77 commented Apr 20, 2012

Thanks @gfpl001, that fixed my issue too.

@datasage

This comment has been minimized.

Copy link

datasage commented Apr 25, 2012

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;
}
@marcosriso

This comment has been minimized.

Copy link

marcosriso commented May 8, 2012

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

This comment has been minimized.

Copy link

gfpl001 commented May 8, 2012

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

@marcosriso

This comment has been minimized.

Copy link

marcosriso commented May 9, 2012

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

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

@eric-roland

This comment has been minimized.

Copy link

eric-roland commented May 25, 2012

datasage that worked perfectly. Thanks

@raphaelnova

This comment has been minimized.

Copy link

raphaelnova commented Jul 26, 2012

@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.

@marcosriso

This comment has been minimized.

Copy link

marcosriso commented Aug 7, 2012

Thank you @rboanova i will try it out

@subdesign

This comment has been minimized.

Copy link

subdesign commented Sep 8, 2012

thx also solved my problem.

@anassuhaimi

This comment has been minimized.

Copy link

anassuhaimi commented Oct 7, 2012

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

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

This comment has been minimized.

Copy link

cincinatti02 commented Nov 14, 2012

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

@jfmmm

This comment has been minimized.

Copy link

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.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Feb 28, 2013

Approximate duplicate of #1506.

@ankakusu

This comment has been minimized.

Copy link

ankakusu commented Mar 25, 2013

anas-suhaimi,

Thanks for your solution. It worked for me.

Best regards!

@retrolima

This comment has been minimized.

Copy link

retrolima commented Apr 5, 2013

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!

@romerodias

This comment has been minimized.

Copy link

romerodias commented Apr 16, 2013

Thanks @retrolima this solution works for me.

@mcmoe

This comment has been minimized.

Copy link

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!

@rox163

This comment has been minimized.

Copy link

rox163 commented Jul 2, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.