加载谷歌图表API时，PhoneGap（Cordova）应用程序崩溃

Question

I'm testing this app on a iOS Simulator

Whenever I run this code:

google.load("visualization", "1", {packages:["corechart"]});

My phonegap application crashes to a completely white screen. I have a page, where I have some random content and a button, that is assigned a .click() jQuery listener to start loading the google chart api. Whenever I click that button, everything dissapears and I'm left with a blank screen.

Here's the code:

$( '#chartsThirdStep' ).live( 'pageinit',function(event){

    $("#chartThirdStepGoButton").click(function(event){

        parseChartInfo();
    });
});

function parseChartInfo() {

    console.log("parseChartInfo()");
    google.load("visualization", "1", {packages:["corechart"]});
    // app completely crashes here - all jquery mobile stuff dissapears
    // and i'm left with a blank screen on the simulator.
    //google.setOnLoadCallback(drawChart);
}

I'm using:

• Xcode v4.2
• Cordova v1.9.0
• jQuery mobile v1.1.1
• jQuery v1.7.1
• https://www.google.com/jsapi
• Mac OS X v10.6.8
• iOS Simulator v5.0 (272)

Answer 1

first, you need to load the API outside the "ready" event handler, as the loader doesn't seem to work properly inside other functions.
Second, put the click event handler inside the google.load callback, which will prevent the click event from being assigned before the API loads (and thus users can't try to draw charts before the API loads, though it typically loads sufficiently fast that your users should never notice a difference)