I have a page with a Google Maps div:
<div id="map_canvas" style="width: 100%; height: 332px;" ></div>
If I comment out my CSS, the map loads fine: if I include the CSS, the map controls load, but the map tiles don’t load: there’s just a grey background.
This is the case even if I put the map div just after the <body> tag, not within any styled element at all. No CSS, it loads fine. With CSS, no map.
Does anyone know what could be causing this? I don’t quite understand what the problem can be if no CSS styles are being applied to any element that contains the map.
If more diagnostics are needed, please let me know, and I’ll deploy the broken map onto a staging site, so people can look at the source.
UPDATE: OK, the staging site is here – it’s a mess, but the map should load.
It is the overflow: hidden style you have set in your global.css file. remove that and it worked like a charm.