Google Maps API v3 map renders gray

Question

I've seen several topics on this issue but none of the related questions seemed to bring a solution to me.

I'm trying to display a map using Google Maps API v3. On other sites I work on the code working correct, but in this particular case it just wont work.

Things I did:

• Add an API key (tested it with some random values to it, Google alerted directly the used key was invalid then, so that works)
• Instead of including via // I tried to include via http:// since this site won't use https.
• Switching with sensor to true and false
• Tried using an addDomListener, also without success.
• Tried to use an event trigger for resizing the map, no luck there either.
• Tried different zooming levels.
• Tried without mapTypeId, when I logged oMap using console.log I saw a Google Maps object with ROADMAP; apparently ROADMAP is the default if none is given.

This is my code:

<script type="text/javascript">
    function render_map() {
        var oCanvas = document.getElementById("map_canvas");
        var aMapOptions = {
            center: new google.maps.LatLng(52.2129918, 5.2793703),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var oMap = new google.maps.Map(oCanvas, aMapOptions);
    }

    $(document).ready(function() {
        render_map();
    });
</script>

Console shows no errors or whatsoever. The only output I get is this: Any suggestions are highly appreciated. Maybe I'm just overlooking something really silly..?

Answer 1

I found the script was functioning as expected but due to a CSS-rule I encountered this behavior. In my case it was caused by a CSS rule div { overflow:auto; }. Silly.. nonetheless maybe helpful to someone else in the future.