Google maps fullscreen toggle not working in IE7


I’ve a bug in IE7 with my google maps fullscreen toggle.
I test on Win7 with IE9 in compatibility modus. But it doesn’t work on WinXP either.
The whole thing seems to work in browsermode IE8

The thing is the canvas does seems to fill the whole viewport (and the toggle button on the bottom right moves with it and works to toggle it back) but the map isn’t drawn. You just see the original content (but then without the map, since the container is now the whole viewport.
I can’t find the mistake.

Here is the code
the page HTML:

<div id="map_canvas" class="banner"></div>

part of the init function (javascript and jQuery):

// part of the init function
        $('#'+canvas).append('<input type="button" class="button" value="Volledig scherm" onclick="myMap.toggleFs();" />')
        $('#'+canvas).append('<div style="height: 100%; width: 100%;" id="' + this.mapId + '"></div>');

// the toggle functions:
    escFullscreen: function(e) {
        if (e.keyCode == 27) { myMap.toggleFs(); }

    // Toggle map fullscreen
    toggleFs: function() {
        var latLng =
        if (!$('#'+this.canvas).hasClass('fullscreen')) {
            $(":button[value='Volledig scherm']").val('Volledig scherm sluiten');
            $('#'+this.canvas).css('position', 'fixed');
            $(document).bind('keyup', myMap.escFullscreen);
        } else {
            $(":button[value='Volledig scherm sluiten']").val('Volledig scherm');
            $('#'+this.canvas).css('position', 'relative');
            $(document).unbind('keyup', myMap.escFullscreen);
        google.maps.event.trigger(, 'resize');;

And the css from default.css

div.fullscreen {
	margin: 0;
	padding: 0;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	height: auto !important;
	width: auto !important;
	position: fixed;
	z-index: 100;

body.fullscreen {
	overflow: hidden;

div.banner input {
	z-index: 10000000;
	position: absolute;
	bottom: 20px;
	right: 1px;

and the IE.css

/* Fix for fullscreen Maps */
    position: fixed;
    display: block;
    overflow: hidden;

If I check with the F12-development thingy all styles are applied, they just don’t work for IE7, but I don’t see the problem. Maybe there’s some bug with the resize trigger, since the actual map seems the only thing missing…


I’d need to see the page to debug but sounds like haslayout.

Try adding zoom:1.0 to .fullscreen (or any other parent that isn’t in haslayout mode)

Hi Paul,

I’ve just tested with alerting the currentStyle.hasLayout property of the map_canvas and the body-tag (both have .fullscreen class) they all result in ‘true’. (when toggling back and forth.)
(i did add a .fullscreen{zoom: 1.0;} to the stylesheet)
Since the whole map thing is behind a log-in, I’ll try to make it available for debugging soon.