InfoBox: 'Invalid Argument' JS Error in IE8 while creating an InfoBox on a hidden google map

[GoogleCodeExporter]

In case the google map is not visible (e.g. the surrounding div is not 
displayed) the creation of an InfoBox in IE8 leads to an javascript error.

The codeline 

this.div_.style.width = (this.div_.offsetWidth - bw.left - bw.right) + px;

leads to an 'Illegal Argument' JS error when (this.div_.offsetWidth - bw.left - 
bw.right) is below 0. This is because in IE8 'this.div_.offsetWidth' is always 
0 when the surrounding div is not displayed.

As a quick fix i added this code:

// workaround for MSIE8: this.div_.offsetWidth seems to be 0
// when the google map is not visible.
// so in case the calculated width is below 0, 
// set it to 0 because 'this.div_.style.width = width + "px";'
// will lead to an error otherwise.
// since the used css-class uses a min-width attribute,
// the given width isnt taking effect anyway.

var width = (this.div_.offsetWidth - bw.left - bw.right);
if (width < 0) {    
  width = 0;        
}                   
this.div_.style.width = width + "px";

Version: 1.1.12

Browser / Operating System:
IE8

Original issue reported on code.google.com by Sebastia...@googlemail.com on 7 Aug 2013 at 3:03

[GoogleCodeExporter]

So I've tried to re-create this issue, but I'm having issues creating a 
situation where this would happen.  If I set the width in the box style to 
something like 50 px, it never reaches that point in the code; the fixed with 
variable gets set.  If I don't set it to anything, the getBoxWidths_() function 
returns zero's for top, bottom, left, and right, meaning it shouldn't go below 
0.

If you have an example for me, please post it so I can take a look.

Original comment by brett.mc...@gmail.com on 12 Sep 2013 at 5:23

• Changed state: NeedsMoreInfo
• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I have the following HTML structure

<div style="display: none;" id="containerWithMap">
   <div style="height: 100%; width: 100%; position: relative;" id="map_canvas_wrapper">
      <div id="map_canvas" style="position: relative; overflow: hidden;">
        ... here comes the map...
      </div>
   </div>
</div>

In case the containerWithMap element is not displayed, the creation of an 
InfoBox isnt working. But only in IE8 - the real one, not the IE8 mode in IE9 
or IE10. 

I hope this example will help you to recreate the issue. 
Thx!

Original comment by Sebastia...@googlemail.com on 24 Sep 2013 at 7:55

• Added labels: ****
• Removed labels: ****