How/Where can I read a value to tell when my Google Maps API V3 map has completed rendering?

I have a Google Map that is created using the newer Google Maps API V3 from a Perl script. The script builds the map from values passed to it from hidden form fields in the parent page, and returns the map into an iframe in the same parent page.

The reason that the map is in the iframe, is because I have discovered browser issues both with Firefox and IE when trying to render the map directly to a div on the parent page. This does not occur when the map is elsewise rendered into the iframe window. I have concluded that this is because the new Google Maps API V3 is a bit querky in how it interprets CSS inheiritence, and more or less demands that the map be rendered to a block element with 100% values for both width and height. By rendering the iframe window into the div, I can control the size I want through the div's CSS, while at the same time giving the Google Maps API the 100% width and height values through the iframe document.

This came about originally, because I really wanted the map to be rendered in a hidden div, that is made visible with jQuery when a user clicks on the Map link. However, this will not work in either Firefox or IE, and the map fails to render in an element whose initial CSS display property is set to none. This will not even work when trying it with an outer div wrapper where it should have inheirited the values from that wrapper div.

So now I have a workaround, where the div is not initially hidden, the iframe shows, the maps builds perfectly, and then a setTimeout event written into the iframe page then closes the div to hide the map on the parent page. I know, I know, it's quite the hack, but it does allow the map to render properly and then hides it from view.

So what I am looking for here, is a way to tell when the map has finished rendering to initiate the jQuery event to hide the div, instead of the setTimeout method that is currently being used (which is also no guarentee that the map really has finished rendering. It's only a good timed guess at best).

Below is an example page where you can observe this entire sequence of how the map is built and then hides.

http://www.cooscurryclassifieds.com/adpages/20100910-041923.html

I have searched through the Google Maps API V3 documentation, and looked around elsewhere on the web to see if there was some way to tell when the map has completed rendering without success, and am hoping someone familiar with the new Google Maps API might have the answer I seek to at least make this workaround hack a bit more graceful :)

Thanks for any direction you can point me to achieve what I'm trying to accomplish here.

@Tobi. Moving the Iframe off the screen would not help, as the div the iframe lives in HAS to have a dimension, so I would just be left with a blank background space with the same dimensions of the containing div of the iframe. The strange thing about all this, is that you can hide and reveal the div without any problem after the Iframe has rendered the first time. BTW... the only problem with the code of this page is the damn deprecated frameBorder property that I have to use in order to not get the wonky inset iframe border in IE... otherwise it validates as perfect.

Epiphany 2010-09-12 23:07:44

@Tobi. If you truly have an answer, and are telling me that you have a way to render the map in a div with an initial display value set to none, then post a working example... and I'll give you my vote. If you observed the example page I posted, the function of the containing div has to work with a toggle type animation for the show and hide of the div to match the actions of contact form and flag ad form that also work this way on the same page. So the map must work the same way to retain consistency.

Epiphany 2010-09-12 23:20:41

as to having no problems, I mean that I did not have to use an iframe in any of my v3 work yet ...

Tobi Oetiker 2010-09-13 06:18:07

as for using the offscreen div, manipulate its css properties with jquery once the page has loaded. then it will not claim any space ...

Tobi Oetiker 2010-09-13 06:20:11

@Tobi. The reason I use the iframe for the map, is because it is a third-party service to the website. This allows my own page to always finish rendering, even if Google Maps is bogged down or offline. By containing Google Maps within the iframe, my own page and the Google Maps each have there own document tree that operate virtually independent of each other. By doing things this way, the worst case scenario is that the iframe gets a 404, while the page the iframe lives in completes rendering in the usual time.

Epiphany 2010-09-13 12:08:19

@Tobi. This is exactly what I am doing now as far as manipulating the CSS with jQuery, and is really the focus of the original question posed here. In this case, I have jQuery hide the map after the map is rendered, but I am using a setTimeout to achieve this. What I am looking for conceptually, is what would be the Google Maps API event to trigger this, much like document.ready does in jQuery, or window.load in javascript. It would be far better for the Google Map to trigger the event on the completion of the map render, than a timed event through setTimeout.

Epiphany 2010-09-13 12:16:10

ansaurus

tags:

views:

answers:

How/Where can I read a value to tell when my Google Maps API V3 map has completed rendering?

related questions