TypeError: google.load is not a function when using ajax

Question

I am using a Google chart (termcloud) to display some data. I can get this working fine as a static feature on the page, however when I try to load the chart and its assets via ajax it just seems to keep throwing an error:

'TypeError: google.load is not a function'

Here is my ajax function:

$("li.contentpanel").click(function() {

$("#content-panel").show();

$('#content-panel').animate({
    width: '540'
}, 500, function() {
    var dataString = 'alert=1';
    $.ajax({
    type: "POST",
    url: "<?php echo site_url($topicmaplink);?>",
    data: dataString,
    cache: false,

    success: function(html){
        $("#content-panel #inner").html(html);
    }
});

});

This is the page that is called:

(JSAPI and termcloud plugin files are loaded at top of this page)

$(function() {

  google.load("visualization", "1");
  google.setOnLoadCallback(draw);
  function draw() {
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addColumn('string', 'Link');
    data.addRows(<?php echo sizeof($topics);?>);
    <?php 
    $trans = array("ã" => "a", "³" => "3", "º" => "0", "â" => "a", 
        "¡" => ";", "'" => "", "\n" => "",'"' => '');
    shuffle($topics);
    for($j=0;$j<sizeof($topics);$j++){
      $nonforeignkeyword = strtr($topics[$j]['keyword'],$trans);
      $totalnumber = $topics[$j]['occurrence'];
      echo 'data.setValue('.$j.', 0, "'.trim($nonforeignkeyword).'");';
      echo 'data.setValue('.$j.', 1, '.$totalnumber.');';
      echo 'data.setValue('.$j.', 2, "'.$partlink.'/searchterm||'.trim(rawurlencode($nonforeignkeyword)).'");';
    }
    ?>
    var outputDiv = document.getElementById('cp-tmap');
    var tc = new TermCloud(outputDiv);
    tc.draw(data, null);
  }
});

Even when I remove the JSAPI and termcloud js files from the page being called via ajax and place them on the same page that it is being called to the page seems to redirect to google.com and hang on a blank page.

Does anyone know where I am going wrong here?

Thanks in advance for the help

Dave Henderson · Accepted Answer · 2012-08-29 10:48:25Z

2

Solved this issue for anyone who may be having the same problem. Removed on the google.load and setOnLoadCallback and placed these in their own callback function after the datatable has been drawn:

<pre>
<code>
  //google.load("visualization", "1");
  //google.setOnLoadCallback(draw);
  function draw() {
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addColumn('string', 'Link');
    data.addRows(<?php echo sizeof($topics);?>);
    <?php 
    $trans = array("ã" => "a", "³" => "3", "º" => "0", "â" => "a", "¡" => ";", "'" => "", "\n" => "",'"' => '');
    shuffle($topics);
    for($j=0;$j<sizeof($topics);$j++){
      $nonforeignkeyword = strtr($topics[$j]['keyword'],$trans);
      $totalnumber = $topics[$j]['occurrence'];
      echo 'data.setValue('.$j.', 0, "'.trim($nonforeignkeyword).'");';
      echo 'data.setValue('.$j.', 1, '.$totalnumber.');';
      echo 'data.setValue('.$j.', 2, "'.$partlink.'/authorname||'.trim(rawurlencode($nonforeignkeyword)).'");';
    }
    ?>
     var outputDiv = document.getElementById('cp-tmap');
    var tc = new TermCloud(outputDiv);
    tc.draw(data, null);
  }


$(document).ready(function(){ 
    setTimeout(function(){ 
        google.load("visualization", "1",{"callback" : draw});  
  }, 100); 
}); 
</code>
</pre>

answered Aug 29, 2012 at 10:48

Dave Henderson

1511 gold badge1 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Over a year ago

stackoverflow.com/questions/15575354/… The answer to the question in the link seems to address this issue.

mansi joshi · Accepted Answer · 2020-04-01 05:16:58Z

1

You need to add this script tag into your index.html

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> </script>

You can check this from google charts site.

Geo chart from google

answered Apr 1, 2020 at 5:16

mansi joshi

413 bronze badges

Comments

Jamie S · Accepted Answer · 2015-04-27 22:19:41Z

0

I was having a similar problem where my draw function was not able to find the element it was looking for. It seemed to be failing on:

document.getElementById('map-canvas');

I found the reason to be the google.load("visualization", "1"); must be calling document.write which means that the DOM was totally empty when I tried to grab the element.

I fixed it by putting the google.load into the index.html so visualization was loaded before it got to my draw( ) function

answered Apr 27, 2015 at 22:19

Jamie S

2,3292 gold badges17 silver badges21 bronze badges

Collectives™ on Stack Overflow

TypeError: google.load is not a function when using ajax

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related