Google Maps and Dynamic IFRAMEs

I recently created an application that displayed a Google Map in an IFRAME in the main page.

The IFRAME itself was created by running a small piece of javascript to populate innerHTML in a specific DIV container.

For some reason, several of the tiles were missing from the page when it first rendered.

After tricking around with this for ages, I eventually came up a solution.

When you insert a Google Map in a page, either in a standard page or in an IFRAME, the map will display according to the geometry of the page. For standard page, the geometry is straightforward, and you generally won’t encounter any problems.

In a page containing an IFRAME things are a little different, particularly when you create the IFRAME on the fly.

Consider this:

A page starts to render. Its a long page, and half way down, some javascript runs to create an IFRAME. This IFRAME then goes off and pulls down a Google Map, but this process starts before the parent page is fully rendered.

Result: Google Map is wonky.

So what’s the solution?

Basically, you just need to insert a little delay into your Javascript to allow the parent page fully render before the Google Map create begins:



If you need to pass co-ords to your map rendering function, just
create an inner function in your primary function:


function js_viewGoogleMap(x,y) {

function loadMap() {





Hope this helps.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>