Home Programming Foundation CSS Framework and Google Maps

Foundation CSS Framework and Google Maps


I’ve been a long time user of the CodeIgniter Google Maps library from Biostall for a long time. More recently, I started using the the Foundation CSS Framework from Zurb. However, once I switched to it I immediately found a problem with the slider and the little Street Level guy not showing correctly on the page.I did some digging around to find the problem and was able to find a github post that started leading me in the right direction. The problem stems from this line:

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

Then I had to figure out how I wanted to fix it. I created a wrapped div called ‘googlemap’ and also styled the div ‘map_canvas’  with the following:

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

And this solved my problem. Also, it allowed street view to start working as well as other overlays. Obviously this overrides the CSS reset. But for me it’s not an issue because I’m hiding the map on mobile devices anyway.

I hope this helps you out!


Comments are closed.