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.

  • I found this bug in OpenLayers 2.11 (which I was using) which seemed to be very similar to what I'm experiencing. Unfortunately, having updated to OpenLayers 2.12, nothing has changed.
    – jhsowter
    Commented Jul 24, 2012 at 1:29

2 Answers 2


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.


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.


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

document.body.onresize = function (){   

and do what ahocevar do here

Using display:block instead of position:absolute.

i hope it helps you...

  • Thanks for your answer. Unfortunately, neither of the ideas you've given have had any effect. I am not using display:absolute for the map div, and I have tried calling redraw for the layers on the resize event. I still see the same behaviour problem.
    – jhsowter
    Commented Jul 30, 2012 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.