Async Google Maps API v3 undefined is not a function [closed]

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 a Uncaught TypeError: undefined is not a function. I checked chrome inspector and found out that google.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?!



You can't load the maps-API asynchronous with the well-known URL( )

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)

Now you get a different loader which:

  1. doesn't use document.write()
  2. calls the callback-function(initialize) when the maps-API has been loaded


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:

        google.load("maps", "3",{
             new google.maps.Map(document.getElementById('map-canvas'), {
                center: new google.maps.LatLng(0,0),
                zoom: 3
<script src=""></script>
<div id="map-canvas"></div>


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.