Map resize displays google layer at incorrect zoom level

Question

This is a screenshot of the icons in the wrong position due to the google layer showing the wrong zoom level.

This is how it should look, and how it does look after the user pans the map.

How does this happen? I have a menu which opens a panel on the right side of the map. When the panel is displayed, the map div is resized accordingly. Usually this does not produce any problems. However, at certain zoom levels, resizing the map changes the zoom level which the google layer is displayed at. As soon as the user pans the map, the google layer image changes to the correct image for the current zoom level.

This behaviour doesn't always occur, and it only seems to happen in IE (8 and 9 at least). Resizing the browser window also resizes the map, and sometimes this causes the same behaviour. However the most predictable way to produce this has been to resize the map.

I am using SmartGWT and OpenLayers for the UI, Geoserver for the overlayed WMS layer. The map div is setup in a SmartGWT Canvas. I am handling the canvas resize event and calling map.updateSize() from there. As I have mentioned, the base layer is a google hybrid layer.

Although this problem doesn't occur 100% of the time, it does happen often, and it happens at the kind of zoom levels which users are likely to view very often.

Answer 1

I am using the following workaround. It's not ideal but it's the only workaround I've found so far.

the workaround is to pan the map when the div is resized as follows.

$("mapDiv").resize(function(){
    map.pan(1,1,null);
});

The effect of this is that if the layer does the buggy zoom, the pan, which occurs afterwards, gets everything back in sync. So the user sees the map zoom out and then back in. This is a bit jarring but until a real fix can be found, this at least leaves things in the correct position.

Answer 2

You can listen the browser resize event and then redraw the vector layer.

document.body.onresize = function (){   
vectorLayer.redraw();
}

and do what ahocevar do here

Using display:block instead of position:absolute.

i hope it helps you...