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: https://github.com/zurb/foundation/issues/26 – raklos Feb 04 '12 at 14:01 — raklos, Feb 04 '12 at 14:01

score 186 · Accepted Answer · answered Feb 07 '12 at 03:50

186

With Bootstrap 2.0, this seemed to do the trick:

#mapCanvas img {
  max-width: none;
}

answered Feb 07 '12 at 03:50

kevinwmerritt

2,218
1
15
12

6

Make sure to add `#mapCanvas img { width: auto; display:inline; }` as mentioned below by @nodrog – jlb Mar 09 '12 at 18:58
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 Apr 30 '12 at 16:58
FYI: Bootstrap 2.0.4 release notes: "Added special CSS to prevent max-width: 100%; on images from messing up Google Maps rendering." – kevinwmerritt Jul 31 '12 at 16:56
That's strange that they have finally decided to hardcode id, not use class instead – zerkms Aug 10 '12 at 11:36
1

#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! – Fydo Oct 27 '12 at 02:06
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; } – Sam Joseph May 17 '13 at 10:22
Awesome man.. For 2 projs i thought there was something wrong with google maps///:) – phpdev Oct 29 '13 at 04:24
Essentially this also works for Gmaps4rails and Zurb Foundation: Use `img { max-width: none; width: auto; display: inline; }` on .smap (the class name can be choosen via gmaps()' map_options) – Yo Ludke Jun 03 '14 at 08:18

nodrog · Answer 2 · 2012-06-18T09:37:38.827

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 '12 at 09:37

answered Mar 07 '12 at 11:15

nodrog

3,532
2
25
31

Yes ! everything seems fixed with this one combined with the answer flagged as "accepted" above. Thanks. – Mat May 19 '12 at 20:37
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'); });` – yosafatade Dec 09 '12 at 19:12
You are a genius. Thanks very much. This was driving me insane :-) – Bear Aug 21 '13 at 14:19

robd · Answer 3 · 2013-09-24T18:37:17.420

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 '13 at 18:37

answered Jul 31 '12 at 14:43

robd

9,646
5
40
59

I think only to change the id is necessary in v2.2.2 – jacktrades Feb 08 '13 at 20:58
i cannot find such id in css file – Muhaimin Apr 12 '14 at 01:59
@robd : Just for curious, Why it will not work for except map_canvas. – ArunRaj Apr 22 '14 at 07:08
@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. – robd Apr 22 '14 at 17:14

score 11 · Answer 4 · answered Sep 24 '13 at 16:08

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 '13 at 16:08

Christopher Dow

325
4
9

+1 this is the only answer that worked for me to fix the weird "zoom" controls. (Bootstrap 2) – philfreo Oct 24 '13 at 00:40
Worked for me too. Good spotting :) – jeje Jan 04 '14 at 20:22
Thanks, worked for me too. The only answer that worked for me to fix the weird "zoom" controls. (with Foundation 5) – Steffi Mar 13 '15 at 10:15

score 3 · Answer 5 · answered Feb 04 '12 at 14:16

3

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

answered Feb 04 '12 at 14:16

Pawpoint

31
2

score 2 · Answer 6 · answered May 17 '13 at 10:22

2

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

answered May 17 '13 at 10:22

Sam Joseph

4,584
4
31
47

score 2 · Answer 7 · answered Jun 20 '13 at 15:05

2

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

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

answered Jun 20 '13 at 15:05

Benjamin Crouzier

40,265
44
171
236

score 1 · Answer 8 · answered Jun 11 '12 at 14:47

1

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%"

answered Jun 11 '12 at 14:47

redochka

12,345
14
66
79

score 1 · Answer 9 · answered Mar 19 '16 at 01:18

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

score 0 · Answer 10 · answered Jan 28 '14 at 04:14

0

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

answered Jan 28 '14 at 04:14

Redtopia

4,947
7
45
68

1

This worked for me. If you're gonna vote someone down, you should at least say why. – Redtopia May 06 '14 at 21:38

score 0 · Answer 11 · answered May 20 '14 at 15:09

0

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 { }

answered May 20 '14 at 15:09

user2060451

2,576
3
24
31

Twitter Bootstrap CSS affecting Google Maps

11 Answers11

Linked