Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Foundation CSS interferes with Google Maps markers #26

Closed
bpfh opened this Issue · 8 comments

5 participants

bpfh Jonathan Smiley Matt Kelly Neil Alex Levine
bpfh

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="http://maps.gstatic.com/mapfiles/markers/marker_sprite.png" 
 usemap="#gmimap1"> 

Any help would be much appreciated!

Jonathan Smiley

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.

bpfh

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.

Matt Kelly
Owner

Looks like rule has caused problems for other projects as well:
murtaugh/HTML5-Reset#7

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.

bpfh

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

bpfh bpfh closed this
Matt Kelly
Owner

Yup, glad you we able to get it working.

Neil

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

Deleted user

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

Alex Levine

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
Something went wrong with that request. Please try again.