I display an openlayers map in a html page by placing it in a tag and assigning a css class to it so as to set its dimensions (map size and map bounds).

i then attempt to dynamically create a style element (my custom division class), append it to the document and change the map class to this custom style.

2 unintended things happen:

  1. just appending the style to the document changes the class of the map division (bad DOM on my part, surely);

  2. the map division still uses "old" bounds (does not center correctly on zoom);

Can anyone recommend a better approach to this situation?

Code and further details on this stackoverflow post

1 Answer 1


After the container size is changed you have to update the map size and recalculate bounds:


You can check the OL documentation http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize


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