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

by

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:

  1. doesn’t use document.write()
  2. 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>

More Related Contents:

  1. async loading javascript with document.write
  2. Calculate distance between two points in google maps V3
  3. AngularJS : Initialize service with asynchronous data
  4. Why do we need middleware for async flow in Redux?
  5. Call async/await functions in parallel
  6. Call An Asynchronous Javascript Function Synchronously
  7. How to turn this callback into a promise using async/await?
  8. Reactjs async rendering of components
  9. How to use jQuery in chrome extension?
  10. SyntaxError: Unexpected token function – Async Await Nodejs
  11. How do I return the response from an asynchronous call?
  12. Rotating image / marker image on Google map V3
  13. ES6 Promises – something like async.each?
  14. How to return from a Promise’s catch/then block?
  15. When to close MongoDB database connection in Nodejs
  16. Google Maps JavaScript API won’t display markers from KML exported from My Maps
  17. Node async loop – how to make this code run in sequential order?
  18. Asynchronous Script Loading Callback
  19. CORS and Google Maps Places Autocomplete API calls [duplicate]
  20. How to chain ajax requests?
  21. Google Maps Api v3 – getBounds is undefined
  22. Can I remove just the popup bubbles of POI’s in Google Maps API v3?
  23. When does async function actually return a pending promise?
  24. Google Maps API v3 Highlight Country Border without using Polygons
  25. How to resolve the Syntax error : await is only valid in async function?
  26. How can I modify the markers?
  27. Google Maps: Auto close open InfoWindows?
  28. How to make javascript fetch synchronous?
  29. AngularJS ng-include inside of Google Maps InfoWindow?
  30. Google maps API V3 method fitBounds()

Leave a Comment