Colorbox appears empty in IE8 and IE9 with iframe using colorbox-inline

Hi,

I am trying to load a google map iframe in colorbox.

I tried using colorbox-load:
<a class="colorbox-load" href="https://www.google.com/maps/...">link</a>

but was unable to get it to work maybe because google blocks attemps to iframe pages on their site? It seems to work with all other urls...

I tried using colorbox-inline:

<a class="colorbox-inline" href="?width=800&height=620&inline=true#iframe">link</a>

<div style="display: none;">
<iframe id="iframe"></iframe>
</div>

Which worked in all browsers except IE8 and IE9 the colorbox window loads empty, but in IE8 if I refresh inside the colorbox, it loads the map. Thereafter, the map loads fine when launching colorbox, until the page is refreshed.

Here is an example on my site:
housingdev.drupal.asit.ucsb.edu/test-0

Does anyone have any advice on how to get this working?