Async Google Maps API v3 undefined is not a function
You can't load the maps-API asynchronous with the well-known URL( http://maps.googleapis.com/maps/api/js?v=3&sensor=false )
When you take a look at the script-file, you'll see, that this is not the API that gets loaded, it's a loader that loads the API. The loader makes use of document.write()
, what will lead you to unexpected results when called after the document has been loaded.
Furthermore the onload-event of the document doesn't wait for asynchronous loaded objects, it may come too quick.
You also cannot use the load-event of the script to invoke the initialize-function, because when it fires, the loader is loaded, not the maps-API.
What to do:
append a callback-parameter to the script-URL(with the name of the initialize-function as value)
http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize
Now you get a different loader which:
- doesn't use
document.write()
- calls the callback-function(initialize) when the maps-API has been loaded
Demo: http://jsfiddle.net/doktormolle/7cu2F/
Related to the comment: seems the callback has to be a function attached to window directly. not cool google :)
There is another option, the google-API-loader which supports the usage of function-references (instead of function-names).
Sample, which loads the maps-API asynchronously, but only when there is an element with the ID map-canvas
in the document, and then creates a map:
window.addEventListener('load',function(){
if(document.getElementById('map-canvas')){
google.load("maps", "3",{
callback:function(){
new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(0,0),
zoom: 3
});
}
});
}
},false);
body,html,#map-canvas{
height:100%;
margin:0;
padding:0;
width:100%;
}
<script src="https://www.google.com/jsapi?.js"></script>
<div id="map-canvas"></div>
Stephen
Updated on February 14, 2020Comments
-
Stephen about 4 years
I'm writing an app that loads Google Maps asynchronously with a hand-built framework.
When I load maps it will not load all of it for some reason and I'll end up with aUncaught TypeError: undefined is not a function
. I checked chrome inspector and found out thatgoogle.maps
is a valid object, but it has none of its own properties. I manually call the "initialize function" well after the document has loaded. What am I doing wrong?! -
Stephen over 11 yearsOk thanks for the info. I didn't want to use the
callback=initialize
because I wanted to pass some extra arguments in the initialize function, but I guess I'll have to work around it. -
Stephen over 11 yearsThis is exactly what I was looking for
-
apneadiving about 9 yearsseems the
callback
has to be a function attached to window directly. not cool google :) -
Dr.Molle about 9 years@apneadiving: The google-API-loader would be an option in this case, see my edited answer.
-
Ben Racicot almost 9 years@Dr.Molle 1 in 5 page loads still gives the error with that script. Is caching involved on Google's end or something?
-
Andrew F. about 8 yearsThere is another great solution that worked for me. It is about using Google API Loader (explained here).
-
XoXo about 5 yearsdevelopers.google.com/loader is 404