Search code examples
javascriptcssgoogle-mapsgoogle-maps-api-3openlayers

OpenLayers Google Map Resize Issue


I am using OpenLayers in my project , but i have a problem with resizing. When i open my bigger -which is bigger div- map , map does not cause a problem, however when i open my map in small div, map does not resize itself.

I have tried couple things to solve this problem:


 window.onresize = function()
        {
          setTimeout( function() { map.updateSize();}, 200);
        }

$(window).trigger('resize');


  function resize() {
      var div = $('#map');
      div.height(
        Math.max( div.height() + ($(window).height() - $('body').height()), 300 )
      );
      map.updateSize();
    }

I have also tried to update library file.

http://trac.osgeo.org/openlayers/attachment/ticket/2828/openlayers-2828.patch


Solution

  • Try using this algorithm:

    function reduce() { 
    var mapDiv = document.getElementById("map"); 
    console.log("Current size: "+mapDiv.style.width+ " / "+mapDiv.style.height); 
    mapDiv.style.width = mapDiv.clientWidth - 10 + "px"; 
    mapDiv.style.height = mapDiv.clientHeight - 10 + "px"; 
    console.log("New size: "+mapDiv.style.width+ " / "+mapDiv.style.height);