$(document).ready firing before Google Maps scripts arefully loaded

#1

About 1 time in 10, I get an error during my $(document).ready
callback because Google Maps' loader hasn't pulled in all of its
JavaScript dependencies yet.

Using Web Developer > View Source > View Generated Source, here's what
the head of my document looks like when I get such an error.

<head>
<script src="http://maps.google.com/maps?
file=api&v=3&sensor=false&key=MY_API_K EY" type="text/
javascript"></script>
+ <script src="http://maps.gstatic.com/intl/en_us/mapfiles/176c/
maps2.api/main.js" type="text/javascript"></script>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery.jmap.js" type="text/javascript"></
script>
<script src="scripts/initialize.js" type="text/javascript"></
script>
</head>

The line starting with + was injected by Google Maps with
document.write. The call to $(document).ready is in initialize.js

jQuery(document).ready(function($){
jQuery('#map1').jmap('init', {'mapCenter':[37.5, -95.7],
'mapZoom': 4}); // CONUS
});

#map1 references an empty div to hold the map. I got jquery.jmap.js
from git://github.com/digitalspaghetti/jmaps.

The error is G_NORMAL_MAP is not defined at line 104 of
jquery.jmap.js, but I think jquery.jmap.js is an innocent victim here.

And here's what the head looks like when everything's loaded before my
$(document).ready callback fires:

<head>
<script src="http://maps.google.com/maps?
file=api&v=3&sensor=false&key=MY_API_K EY" type="text/
javascript"></script>
+ <script src="http://maps.gstatic.com/intl/en_us/mapfiles/176c/
maps2.api/main.js" type="text/javascript"></script>
+ <style type="text/css">@media print{.gmnoprint{display:none}}
@media screen{.gmnoscreen{display:none}}</style>
+ <script src="http://maps.gstatic.com/intl/en_us/mapfiles/176c/
maps2.api/mod_jslinker.js" charset="UTF-8" type="text/javascript"></
script>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery.jmap.js" type="text/javascript"></
script>
<script src="scripts/initialize.js" type="text/javascript"></
script>

+ <script src="http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/
176c/maps2.api/%7Bmod_drag,mod_ctrapi%7D.js" charset="UTF-8"
type="text/javascript"></script>
+ <script src="http://maps.gstatic.com/intl/en_us/mapfiles/176c/
maps2.api/mod_apiiw.js" charset="UTF-8" type="text/javascript"></
script>
+ <script src="http://maps.gstatic.com/intl/en_us/mapfiles/176c/
maps2.api/mod_exdom.js" charset="UTF-8" type="text/javascript"></
script>
</head>

The Net tab in Firebug shows that the extra GMaps scripts have not
been loaded in the failure case.

Any suggestions? Does script injection with document.write play well
with $(document).ready?

This is driving me nuts. Any help appreciated.

/George V. Reilly
Seattle, WA

#2

So all those extra scripts are injected into the head with
document.write? If so they should have definitely been there before
any script below them executed. Have you found the place where Google
Maps is actually doing the document writes for the other scripts? I am
wondering whether it might be adding at least some of the scripts
asynchronously by injecting script tags to the head.

#3

On Oct 15, 6:49*pm, Dave Methvin <dave.meth... (AT) gmail (DOT) com> wrote:

Quote:

So all those extra scripts are injected into the head with
document.write? If so they should have definitely been there before
any script below them executed. Have you found the place where Google
Maps is actually doing the document writes for the other scripts? I am
wondering whether it might be adding at least some of the scripts
asynchronously by injecting script tags to the head.

The first injected script (main.js) is definitely injected with
document.write. I haven't looked to see how the other one's are
injected, but given that they appear at the end of head after the
explicit script blocks, it suggests that there might be some
appendChild games going on.

/George

#4

Over in http://groups.google.com/group/google-maps-api/, I got a
suggestion that seems to work consistently: use Google's Ajax loader
to load the Maps API code asynchronously.

<script type="text/javascript" src="http://www.google.com/jsapi?
key=MY_API_KEY"></script>
<script type="text/javascript">
google.load('maps', "2.x", {other_params:"sensor=false"});
google.setOnLoadCallback(function() { /* My initialization
code */ });
</script>

/George

#5

And here's a pared-down repro of my original problem:
http://www.georgevreilly.com/temp/loaddemo.html

Be warned. It reproes maybe one time in 50 with this code. Seems to
happen more if the browser has been idle for a while.

/George

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

$(document).ready firing before Google Maps scripts arefully loaded

jQuery jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

$(document).ready firing before Google Maps scripts arefully loaded - 10-15-2009 , 07:29 PM

Re: $(document).ready firing before Google Maps scripts arefully loaded - 10-15-2009 , 08:49 PM

Re: $(document).ready firing before Google Maps scripts arefully loaded - 10-15-2009 , 09:16 PM

Re: $(document).ready firing before Google Maps scripts arefully loaded - 10-16-2009 , 03:47 PM

Re: $(document).ready firing before Google Maps scripts arefully loaded - 10-16-2009 , 03:59 PM