Question

This Google jQuery GeoChart plugin works great like this:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        // code to draw map
      };

</script>

But moving the code into classes, breaks everything. Browser is blank and status remains “transferring data from http://www.google.com.”

(function( someClass, undefined ) {
    someClass.init= function() {
       console.log(google); //google object defined but next line breaks:
       google.load('visualization', '1', {'packages': ['geochart']}); 

       ...remainder of code
    };
}( window.Project.Pages.someClass = window.Project.Pages.someClass || {}));

Any ideas as to why?

Answer 1

The problem is caused by the way how Google loads their scripts. A simplified version of the problem occurred in this question: The problem was caused by the fact that the load of a Google script was delayed.

I’ve previously written a patch which is supposed to fix the issue, see this answer. Just evaluate the patch before using google.load.