Hi,
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 = this.map.getCenter()
if (!$('#'+this.canvas).hasClass('fullscreen')) {
$('body').addClass('fullscreen');
$(":button[value='Volledig scherm']").val('Volledig scherm sluiten');
$('#'+this.canvas).css('position', 'fixed');
$('#'+this.canvas).addClass('fullscreen');
$(document).bind('keyup', myMap.escFullscreen);
} else {
$('body').removeClass('fullscreen');
$(":button[value='Volledig scherm sluiten']").val('Volledig scherm');
$('#'+this.canvas).css('position', 'relative');
$('#'+this.canvas).removeClass('fullscreen');
$(document).unbind('keyup', myMap.escFullscreen);
}
google.maps.event.trigger(this.map, 'resize');
this.map.panTo(latLng);
}
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 */
div.fullscreen{
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…