Foundation CSS interferes with Google Maps markers #26

bpfh opened this Issue Oct 23, 2011 · 8 comments


None yet

5 participants


I am using Foundation with Rails and displaying Google Maps using gmaps4rails. Normal map markers are unaffected, but when I create a dynamic marker and set it to draggable, Foundation scales the marker to approx. 50% of its width. The marker is created with

var marker = new google.maps.Marker({draggable: true});

Omitting the Foundation CSS from the asset manifest restores the marker look, as does setting draggable to false.

I tried to hunt down the CSS that would cause this, but failed. The marker element in the DOM is:

<img style="position: absolute; left: 0px; top: 0px; width: 20px; 
 height: 34px; -moz-user-select: none; border: medium none; 
 padding: 0px; margin: 0px;" src="" 

Any help would be much appreciated!


Could you drop in more of the context around the marker (the markup I mean) - that or drop in the computed styles that Firebug / Chrome Inspector prints out? Not sure why Foundation would be shrinking the markers like that when the size styles are inline.


Found it. It's the following rule in the CSS reset section:

img, object, embed { max-width: 100%; }

Google Maps seems to use images in a rather creative way, and does not play well with this reset rule.


Looks like rule has caused problems for other projects as well:

However it's core to Foundation being responsive, and needs to stay in.

You should be able to override this property by setting max-width: none; for elements this cause problems for. Just note that those images will not scale for devices with smaller screens, but that is probably the effect that you want.


Yeah, got it fixed by overriding max-width. Marking this as closed if that's OK.

@bpfh bpfh closed this Oct 24, 2011

Yup, glad you we able to get it working.


Would it not make sense to build a class into the foundation core:

.gmap-icons img{
    max-width: none

I would only presume that google will continue to be creative. Being global it could be used added to any modular google container and stop duplicated code? Just my 2 cents..


#googlemap img, object, embed { max-width: none; }

#map_canvas embed { max-width: none; }

#map_canvas img { max-width: none; }

#map_canvas object { max-width: none; }


thanks @ghost that was a good paste

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