[jQuery] $(document).ready firing before Google Maps scripts are fully loaded
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_KEY" 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_KEY" 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
Topic Participants
george.v.reilly
Dave Methvin