找不到谷歌地图回调函数

Question

I have the following files loaded in sequence:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=try_to_initialize"></script>
<%= javascript_include_tag "application" %>

The application.js.erb referenced secondly has the following line of code:

function try_to_initialize() {
    initialize_google_maps();

    if (typeof initial_data !== 'undefined') {
        google_maps_draw_data(initial_data, false);
    }
}

The function is defined at the global space. It is not in any kind of event handler or local scope.

I checked the network tab to make sure the files are loaded in order:

js?v=3.exp&sensor=false&callback=try_to_initialize  GET 200 script  (index):30  (from cache)    6 ms    
application-3332227d778ac1e4b9e987588145ff49.js GET 200 script  (index):31  (from cache)    0 ms    

Everything looks fine. Unfortunately, in the console I get the following error:

js?v=3.exp&sensor=false&callback=try_to_initialize:95 Uncaught InvalidValueError: try_to_initialize is not a function

I know what the error suggests. I just don't know why it is happening. Why can't it find the function?

Answer 1

Problem

The order of function definition matters in relatively small apps. If you have Google JS loader put first, then init , the script will block other resources from loading until it is fully loaded.

Test 1 (without async attribute)

The following example will throw an error from Google engine as an object with message:

init is not a function

 function init(){ console.log('API loaded'); } 

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=init"></script> 

Changing the order of <script> will fix the issue as init will be defined, and then browser fetches Google library.

 <script> function init(){ console.log('API loaded'); } </script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=init"></script> 

Test 2 (with async)

I have used async attribute in <script> to ensure it will not block the rest of resources from loading.

 function init(){ console.log('API loaded'); } 

 <!-- the following script will act as block because of async attribute --> <script async src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=init"></script>