Twitter Bootstrap CSS affecting Google Maps

Question

I'm using Twitter Bootstrap, and have a Google map.

Images on the map, such as marker are being skewed by the CSS in Bootstrap.

In the Bootstrap CSS there is:

img { border: 0 none; height: auto; max-width: 100%; }

When I disable the max-width property using Firebug, the marker image appears as normal. How can I prevent the Bootstrap CSS from affecting the Google maps images?

answer here: github.com/zurb/foundation/issues/26

raklos
– raklos

2012-02-04 14:01:32 +00:00
Commented Feb 4, 2012 at 14:01 — raklos
– raklos, Commented Feb 4, 2012 at 14:01

kevinwmerritt · Accepted Answer · 2012-02-07 03:50:58Z

186

With Bootstrap 2.0, this seemed to do the trick:

#mapCanvas img { max-width: none; }

answered Feb 7, 2012 at 3:50

kevinwmerritt

2,2181 gold badge15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

jlb Over a year ago

Make sure to add #mapCanvas img { width: auto; display:inline; } as mentioned below by @nodrog

kevinwmerritt Over a year ago

From Bootstrap 2.0.3 release notes: "Fixed regression in responsive images support as of 2.0.1. We've re-added max-width: 100%; to images by default. We removed it in our last release since we had folks complaining about Google Maps integration and other projects, but we're taking a different stance now on these things and will require developers to make these tweaks on their end."

kevinwmerritt Over a year ago

FYI: Bootstrap 2.0.4 release notes: "Added special CSS to prevent max-width: 100%; on images from messing up Google Maps rendering."

zerkms Over a year ago

That's strange that they have finally decided to hardcode id, not use class instead

Fydo Over a year ago

#mapCanvas didn't work for me. I just used my .map class that i used as the google maps container and it did the trick. THANKS!

|

nodrog · Accepted Answer · 2012-06-18 09:37:38Z

80

There is also an issue with the dropdown selectors for terrain and overlays, adding both these will fix the issues...

#mapCanvas img { max-width: none; } #mapCanvas label { width: auto; display:inline; }

The second style will sort of other issues with the terrain and overlay box in some browsers.

edited Jun 18, 2012 at 9:37

answered Mar 7, 2012 at 11:15

nodrog

3,5322 gold badges28 silver badges31 bronze badges

3 Comments

Mat Over a year ago

Yes ! everything seems fixed with this one combined with the answer flagged as "accepted" above. Thanks.

yosafatade Over a year ago

works like a charm in firefox 17 but not in chrome 23. dont know why but i found the solution just add this: $('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });

Bear Over a year ago

You are a genius. Thanks very much. This was driving me insane :-)

robd · Accepted Answer · 2013-09-24 18:37:17Z

20

Give your map canvas div an id of map_canvas.

This bootstrap commit includes the max-width: none fix for the id map_canvas (but it won't work for mapCanvas).

edited Sep 24, 2013 at 18:37

answered Jul 31, 2012 at 14:43

robd

9,8426 gold badges45 silver badges62 bronze badges

4 Comments

jacktrades Over a year ago

I think only to change the id is necessary in v2.2.2

Muhaimin Over a year ago

i cannot find such id in css file

ArunRaj Over a year ago

@robd : Just for curious, Why it will not work for except map_canvas.

robd Over a year ago

@ArunRaj because the fix in bootstrap is hardcoded to the #map_canvas id (see the linked commit). In any case, this answer is probably out of date now given that it's nearly 2 years old.

Christopher Dow · Accepted Answer · 2013-09-24 16:08:21Z

11

None of these answers worked for me, so I went in to my div and looked at its children I saw a new div with class "gm-style", so I put this in my CSS:

.gm-style img { max-width: none; } .gm-style label { width: auto; display:inline; }

..and that solved the problem for me.

answered Sep 24, 2013 at 16:08

Christopher Dow

3254 silver badges9 bronze badges

3 Comments

philfreo Over a year ago

+1 this is the only answer that worked for me to fix the weird "zoom" controls. (Bootstrap 2)

jeje Over a year ago

Worked for me too. Good spotting :)

Steffi Over a year ago

Thanks, worked for me too. The only answer that worked for me to fix the weird "zoom" controls. (with Foundation 5)

Pawpoint · Accepted Answer · 2012-02-04 14:16:58Z

You want to over-ride the max-width rule in the CSS section by using max-width: none; This seems to be the way around this problem

Sam Joseph · Accepted Answer · 2013-05-17 10:22:42Z

Changing the #MapCanvas didn't work for us using gmap4rails gem, but did when we changed to

.map_container img { max-width: none; } .map_container label { width: auto; display:inline; }

Benjamin Crouzier · Accepted Answer · 2013-06-20 15:05:36Z

I am using gmaps4rails, this fix did it for me:

.gmaps4rails_map img { max-width: none; } .gmaps4rails_map label { width: auto; display:inline; }

redochka · Accepted Answer · 2012-06-11 14:47:37Z

latest twitter bootstrap 2.0.4 includes this fix directly.

If you are wrapping your content in the a (div class="container") as in the demo page of twitter bootstrap, you should add a style="height: 100%"

tempranova · Accepted Answer · 2016-03-19 01:18:49Z

There is also an issue with printing maps using Print in any browser. The img { max-width: 100% !important; } will not be fixed by the code above: you need to add an !important declaration like so:

@media print { img { max-width: auto !important; } }

Redtopia · Accepted Answer · 2014-01-28 04:14:49Z

I also had to turn box-shadow off, and because of the order of my includes, I added the !important flag.

#mapCanvas img { max-width: none !important; box-shadow: none !important; }

This worked for me. If you're gonna vote someone down, you should at least say why.

user2060451 · Accepted Answer · 2014-05-20 15:09:34Z

All answers were max-widht:none

for me, max-height:inherit worked.....

People are using #map, #map_canvas, etc. Look at your parent div. If it's blue, than it will be #blue img { }

Collectives™ on Stack Overflow

Twitter Bootstrap CSS affecting Google Maps

11 Answers 11

8 Comments

3 Comments

4 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

8 Comments

3 Comments

4 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Linked

Related