google.setOnLoadCallback() or body.onload

[Nymor]

Most of the examples in the API ref kick GE off from an init()
function tied to the body.onload event but I've seen some recent posts
where people are using the google.setOnLoadCallback() to call the
createInstance - which one is better and what are the pros/cons to
each method?

I use jQuery alot and therefore tie my inits into the (document).ready
function - before that I used the body.onload but have never used
google.setOnLoadCallback() so am curious....

Regards
Nymor

[fraser (Earth API Guru)]

Hi Nymor,

The body onload action fires immediately after the browser loads the
object it is attached to.
The google.setOnLoadCallback method will call the specified callback
function once your document (including any specified Google APIs) have
finished loading.
The main advantage of setOnLoadCallback as I see it is that it removes
the functionality out of the HTML markup and gives a good catch all
for all the Api.

To use jquery as an example along with the plugin...
--------------------------------------------------------------------------------------
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("earth", "1");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
</script>
----------------------------------------------------------------------------------

There is a good article on the benefits of this approach here:
http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

F.

[palz...@googlemail.com]

Hi,

while I dont have much of a clue of what I'm doing in Javascript most
of the time, I tend to find the Javascript Eventhandlers much more
elegant than the onload, but I can't tell you a reason.

By the way: The most recent API Doc is now using them as well, see for
example the Earth Plugin Introduction at
http://code.google.com/apis/earth/documentation/#using_the_google_earth_api.
Same is true for Google Maps.

If you're looking for real hard facts about why Javascript
Eventhandlers make more sense, I guess you could put up that the
approach is more universal, as these will work for everything inside
the DOM including every Javascript event itself, while HTML
Eventhandlers - per my understanding - only work for defined HTML
objects and defined events on these.

In addition it's a bit cleaner in your code, which comes in handy when
you're moving from a HTML-Javascript-Mixed Environment, where they're
equal partners in page design, to one where HTML really is just the
output-slave of everybody else, including Javascript.

Marco

On Oct 7, 4:26 am, fraser (Earth API Guru) wrote:
> Hi Nymor,
>
> The body onload action fires immediately after the browser loads the
> object it is attached to.
> The google.setOnLoadCallback method will call the specified callback
> function once your document (including any specified Google APIs) have
> finished loading.
> The main advantage of setOnLoadCallback as I see it is that it removes
> the functionality out of the HTML markup and gives a good catch all
> for all the Api.
>
> To use jquery as an example along with the plugin...
> --------------------------------------------------------------------------------------
> <script type="text/javascript"
>         src="http://www.google.com/jsapi"></script>
> <script type="text/javascript">
> google.load("jquery", "1");
> google.load("earth", "1");
> google.setOnLoadCallback(function() {
>     // Place init code here instead of $(document).ready()
>   });
> </script>
> ----------------------------------------------------------------------------------
>

> There is a good article on the benefits of this approach here:http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-hos...

[kyonn]

I use both

google.setOnLoadCallback() to load general stuff

$(function() which is the same as $(document).ready() : to load html
or particular stuff

I mean google.setOnLoadCallback() can only be once used whereas your $
(function() can be used as many times you want.

On 8 oct, 12:49, "[email address]" wrote:
> Hi,
>
> while I dont have much of a clue of what I'm doing in Javascript most
> of the time, I tend to find the Javascript Eventhandlers much more
> elegant than the onload, but I can't tell you a reason.
>
> By the way: The most recent API Doc is now using them as well, see for

> example the Earth Plugin Introduction athttp://code.google.com/apis/earth/documentation/#using_the_google_ear....

> Same is true for Google Maps.
>
> If you're looking for real hard facts about why Javascript
> Eventhandlers make more sense, I guess you could put up that the
> approach is more universal, as these will work for everything inside
> the DOM including every Javascript event itself, while HTML
> Eventhandlers - per my understanding - only work for defined HTML
> objects and defined events on these.
>
> In addition it's a bit cleaner in your code, which comes in handy when
> you're moving from a HTML-Javascript-Mixed Environment, where they're
> equal partners in page design, to one where HTML really is just the
> output-slave of everybody else, including Javascript.
>
> Marco
>
> On Oct 7, 4:26 am, fraser (Earth API Guru) wrote:
>
>
>
> > Hi Nymor,
>
> > The body onload action fires immediately after the browser loads the
> > object it is attached to.
> > The google.setOnLoadCallback method will call the specified callback
> > function once your document (including any specified Google APIs) have
> > finished loading.
> > The main advantage of setOnLoadCallback as I see it is that it removes
> > the functionality out of the HTML markup and gives a good catch all
> > for all the Api.
>
> > To use jquery as an example along with the plugin...

> > ---------------------------------------------------------------------------­-----------

> > <script type="text/javascript"
> >         src="http://www.google.com/jsapi"></script>
> > <script type="text/javascript">
> > google.load("jquery", "1");
> > google.load("earth", "1");
> > google.setOnLoadCallback(function() {
> >     // Place init code here instead of $(document).ready()
> >   });
> > </script>

> > ---------------------------------------------------------------------------­-------

[palz...@googlemail.com]

Hi,

Kyonn wrote: "I mean google.setOnLoadCallback() can only be once"

I use it to trigger various things in my scripts, but I'm not entirely
sure I understand what you mean by 'once'?

By the way: In extension to setOnLoadCallback you can also use
addDomListener to react when something happens in the DOM, like button
clicked, etc.

Marco

[Nymor]

Thanks for the replies all - useful to know - need to experiment
maybe.

Regards
Nymor

[kyonn]

PalzkillM I mean I am not sure that google.setOnLoadCallback could be
used more than one time in the same document, thereas jquery $
(function(){ }); does this job, with a 10k lines long code it could
be useful ...

About anonymous functions, there is a good article that show the
benefits of the auto-executable ones, which look like : (function()
{ }());
http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/

[palz...@googlemail.com]

Kyonn,

I never encountered any problems in using setOnLoadCallback multiple
times in a document. I guess it's sort of an alias for addDomListener
to window.load.

Marco

On Oct 12, 11:49 pm, kyonn wrote:
> PalzkillM I mean I am not sure that google.setOnLoadCallback could be
> used more than one time in the same document, thereas jquery $
> (function(){   }); does this job, with a 10k lines long code it could
> be useful ...
>
> About anonymous functions, there is a good article that show the
> benefits of the auto-executable ones, which look like : (function()

> {   }());http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-b...