Problem loading Maps v3 with Common API Loader

kjh21

unread,

Jan 23, 2011, 10:53:01 AM1/23/11

to Google Maps JavaScript API v3

I'm having a problem loading v3 of the Maps API with the Common API
loader

Following is a what I thought was a simple variant of

http://gmaps-samples-v3.googlecode.com/svn/trunk/commonloader/commonloader.html

My intent was

Don't call into the Maps API until it's loaded and don't load the Maps
API until the "page" has loaded so that referenced page elements are
certain to exist.

Instead, I get the error

document.body is null

when the google.load( ) method triggers the execution of line 11 of

http://maps.google.com/maps/api/js?key=your_key_here&v=3&callback=mapsLoaded&sensor=false

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<title>Google Maps JavaScript API v3 Example</title>


<script type="text/javascript" src="http://www.google.com/jsapi?
key=your_key_here"></script>

<script type="text/javascript">

function pageLoaded( ) {
var mapPageElement = document.getElementById("map_canvas");
loadMaps( );
}

function loadMaps() {
var otherParams =
{"other_params":"callback=mapsLoaded&sensor=false"};
google.load("maps", "3", otherParams );
}

function mapsLoaded ( ) {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map( mapPageElement, myOptions);
}

</script>
</head>
<body onload="pageLoaded()">

<div id="map_canvas"></div>

</body>
</html>

Rossko

unread,

Jan 23, 2011, 3:45:20 PM1/23/11

to Google Maps JavaScript API v3

> Following is a what I thought was a simple variant of
>

> http://gmaps-samples-v3.googlecode.com/svn/trunk/commonloader/commonl...

> function pageLoaded( ) {
> var mapPageElement = document.getElementById("map_canvas");

...
> function mapsLoaded ( ) {

> var map = new google.maps.Map( mapPageElement, myOptions);

mapPageElement would be out of scope when needed, but that doesn't
seem to tie in with your error message.

kjh21

unread,

Jan 24, 2011, 11:02:38 AM1/24/11

to Google Maps JavaScript API v3

mapPageElement should indeed be global. Made that change and, as you
surmised, the error is still the same since it never got to the Map
constructor that would have failed on reference to mapPageElement.

I can't locate any definitive documentation on the workings of the API
Loader, particularly, the callback-on-load mechanism.

The only resort seems to be trial and error based on examples.

I would like to use the loader for other API's as well (e.g. earth,
visualization, scriptaculous, prototype ) and not start executing any
client code until the page/DOM and all API's are loaded.

Can someone direct me how best to do that?

Chad Killingsworth

unread,

Jan 24, 2011, 11:12:24 AM1/24/11

to google-map...@googlegroups.com

Is there a reason you got rid of the google.setOnLoadCallback call in favor of the onload attribute on the body tag?

Also, if you'll actually post a link to your map, we might be able to offer more help.

Chad Killingsworth

kjh21

unread,

Jan 24, 2011, 4:32:40 PM1/24/11

to Google Maps JavaScript API v3

No reasoning on my part other than trial and error at this point.

Your question regarding my use of the onload attribute on the body tag
rather than google.setOnLoadCallback seems to imply they serve the
same purpose.

The example I provided above (with the correct scoping of mapElement)
can be found at

http://threadtec.com/maps/v3_loader_test.html

If you have problems accessing the URL it might be a DNS resolution
issue that should resolve itself within 24hrs.

I'm using FireFox 3.6.13. In that case, you'll need to open the Error
Console to see exactly where in the process the loader fails.

On Jan 24, 11:12 am, Chad Killingsworth

Michael Geary

unread,

Jan 24, 2011, 4:55:35 PM1/24/11

to google-map...@googlegroups.com

Your code doesn't look like the code in this example:

http://code.google.com/apis/loader/#Dynamic

I think the problem is this function:

function loadMaps() {

var otherParams = {"other_params":"callback=mapsLoaded&sensor=false"};

google.load("maps", "3", otherParams );

}

With the callback option hidden inside otherParams, google.load() probably does not realize that you need an asynchronous load - so it does a document.write() which erases your document! Then you get document.body is null and such.

Instead, change it to:

function loadMaps() {

google.load( 'maps', '3', {

callback: mapsLoaded,

other_params: 'sensor=false'

});

}

Also, you don't need an API key in your initial script tag that loads the jsapi loader, unless you plan to start using the Earth API or another API which needs a key. The V3 Maps API doesn't need one, so you can use:

-Mike

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

kjh21

unread,

Jan 25, 2011, 12:29:34 PM1/25/11

to Google Maps JavaScript API v3

Mike,

Your explanation of the behavior as well as resolution were right on.

All this arises in the context of migrating an application from Maps
v2 to Maps v3 and, in the course,
generally reworking things to employ more recent practices.

I still have some questions regarding loading multiple API's.

The loader documentation that appears here

http://code.google.com/apis/loader/#intro

cites the following example

<script type="text/javascript">
google.load("search", "1");
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script>

and states

"After you call google.load, you can use all of the loaded modules in
your web page."

That seems ambiguous since there are three separate calls to
google.load( );

Does the absence of a callback cause the load(s) to happen
synchronously?

I want to ensure first that the page/DOM is loaded and then all API's
before executing any application level code
so having the loads happen synchronously and in series is fine.

I am not so much concerned about using asynchronous behavior intended,
presumably, to better manage load-time latencies.

On Jan 24, 4:55 pm, Michael Geary <m...@mg.to> wrote:
> Your code doesn't look like the code in this example:
>
> http://code.google.com/apis/loader/#Dynamic
>
> I think the problem is this function:
>
> function loadMaps() {
> var otherParams = {"other_params":"callback=mapsLoaded&sensor=false"};
> google.load("maps", "3", otherParams );
> }
>
> With the callback option hidden inside otherParams, google.load() probably
> does not realize that you need an asynchronous load - so it does a
> document.write() which erases your document! Then you get document.body is
> null and such.
>
> Instead, change it to:
>
> function loadMaps() {
> google.load( 'maps', '3', {
> callback: mapsLoaded,
> other_params: 'sensor=false'
> });
> }
>
> Also, you don't need an API key in your initial script tag that loads the
> jsapi loader, unless you plan to start using the Earth API or another API
> which needs a key. The V3 Maps API doesn't need one, so you can use:
>
> <script type="text/javascript" src="http://www.google.com/jsapi"></script>
>
> -Mike
>

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2Bunsu...@googlegroups.com>
> > .

Rossko

unread,

Jan 25, 2011, 2:04:07 PM1/25/11

to Google Maps JavaScript API v3

> Does the absence of a callback cause the load(s) to happen
> synchronously?

That is what this implies
http://code.google.com/apis/loader/#Dynamic

Michael Geary

unread,

Jan 25, 2011, 3:26:34 PM1/25/11

to google-map...@googlegroups.com

Yes, no callback means that google.load() will use document.write('<script src="..."></script>') instead of a dynamic script element, and that loads the script synchronously.

But note one thing: the document.write() call writes its output *after* the current executing script tag. (It couldn't very well write into the *middle* of the current executing script for a couple of reasons - the current script tag has already been parsed and compiled, and document.write doesn't write JavaScript code, it writes HTML code.)

So extending your example example:

alert( window.jQuery ); // undefined!

</script>

<!--

Three script tags are written here, for search, jquery, and jqueryui, *in that order*.

So jqueryui's dependency on jquery is no problem.

-->

alert( window.jQuery ); // Now it works

</script>

-Mike

To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.

kjh21

unread,

Jan 28, 2011, 3:01:59 PM1/28/11

to Google Maps JavaScript API v3

Thanks Mike,

All is apparent now.

> > <google-maps-js-api-v3%2Bunsu...@googlegroups.com<google-maps-js-api-v3%252Buns...@googlegroups.com>

Reply all

Reply to author

Forward