9

I'm getting the same error as seen in this question to which there is no answer. To elaborate, I'm trying to load this demo in my code. I've altered it slightly in that I am not including their code in any header tag - this particular code fragment will be loaded in by jQuery. Anyway, so my code looks like this:

<script type='text/javascript' 
        src='https://www.google.com/jsapi?key=ABQIAAAAKl2DNx3pM....'>
</script>

<script type='text/javascript'>

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '', 'Country');
    data.addColumn('number', 'Population (mil)', 'a');
    data.addColumn('number', 'Area (km2)', 'b');
    data.addRows(5);
    data.setValue(0, 0, 'CN');
    data.setValue(0, 1, 1324);
    data.setValue(0, 2, 9640821);
    data.setValue(1, 0, 'IN');
    data.setValue(1, 1, 1133);
    /* ... */
    var chart = new google.visualization.IntensityMap(
                  document.getElementById('chart_div'));
    chart.draw(data, {});
}

$(document).ready(function() {
    google.load('visualization', '1', {packages:['intensitymap']});
    google.setOnLoadCallback(drawChart);
});
</script>

This section of code lies in a div whose visibility is toggled as needed. The whole lot (the entire page here) is returned as the result of an ajax call.

The theory here being using jQuery's $(document).ready() handler means that google should be loaded when the document is ready.

However, I'm getting this:

Google is not defined error message screenshot.

Regardless of whether that section is inside ready() or not. Now here's the real kicker: in the dom explorer, I can find said object:

So google does actually exist. This picture proves it.

Can anyone please explain to me firstly why this is happening and then what I do to fix it?

Being a naive kind of javascript developer, I tried including the google scripts in my head tags. That then produced something like this question ($ not defined) except that we're not loading jQuery from google, we're hosting it locally.

We successfully load a number of other jQuery extensions inline this way as well as extra parts of jQuery code, so to my mind this should work. I do not know whether jQuery is getting in the way of Google/vice versa but they shouldn't be.

Thoughts?

2 Answers 2

11

Removing $(document).ready should fix your problem. I tried your code and after commenting out $(document).ready, it worked:

//$(document).load(function() {
    google.load('visualization', '1', {packages:['intensitymap']});
    google.setOnLoadCallback(drawChart);
//});

Now as for why this is the case, I do not know... In any case, you shouldn't need to wait for document.ready to call google.load; google.load will ensure that by the time your callback drawChart is called, it will be safe to execute.

3
  • Thanks @Karl, I've tried that too though I'm afraid; some problem, same symptoms. I went down the document ready route on the assumption that I needed to wait for google's stuff to load...
    – user257111
    Apr 5, 2011 at 19:32
  • 2
    Aaah I've fixed it - those items needed to be in the <head> tags and just as you say, I don't need need $(document).ready(). Have a tick.
    – user257111
    Apr 6, 2011 at 15:41
  • 2
    As for "Why": Google's script loader uses document.write to load scripts dynamically. When it's deferred, either using a load/domready event, or using setTimeout, the current document will be overwritten, breaking your code - Related answer.
    – Rob W
    Mar 17, 2012 at 9:12
4

You can load the the charts after the page has loaded but with a special callback.

google.load("visualization", "1", {"callback" : drawChart});

https://developers.google.com/loader/#Dynamic

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.