Google Maps does not render correctly in IE8 within iframe nyromodal layer

Question

I try to render a google map within a nyromodal iframe layer.

It works fine in Chrome and Firefox, but in IE8 there is a strange issue: On first load, it works fine. Yet after I close the layer and reopen it on the same page, the map will render false: only mostly showing grey tiles and and and all its content will be splattered randomly, e.g. like so:

If I clear the cache and reload, the map will work again but only one time.

Answer 1

The problem most likely lies within the fact that nyromodal needs time to fully open, while the google API already tries to render the map. Hence it works when clearing the cache, as there is a timeout before all resources are loaded, allowing nyromodal the option to completely open.

So in order to enforce a timeout to fully load the nyromodal, initalize your map in your iframe via

$(document).ready(function () {

 /* set up your map */

 setTimeout(
   function() {
     initalizeYourMap();
 },
 1000);

});