Mysterious 'object doesnt support this method'error in IE8 on google.load

Question

i am using google search JSAPI in my local search app. Everything works fine in all the browsers except IE 8. The problem is after the specific line of code my jquery base object and google objects are drreferenced.

Its a straight forward code. I am able to reproduce the problm using this jsfiddle.

html code is

<html>
    <head>
        <title>Test Map</title>
        <script src="http://www.google.com/jsapi?" type="text/javascript"></script>

    </head>
    <body>
        <div id="map_canvas"></div>
    </body>
</html>

and JS

$(function() {
    alert(1);
    google.load('search',1);
    alert($);

    google.setOnLoadCallback(function() {       
        alert(2);
    });
});

after the line google.load('search',1) i got the following error

Error: Object doesn't support this property or method

on $ and google.

This is totally a nightmare. I am fighting with this for hours without a luck. Any IE experts here got an idea?

score 1 · Accepted Answer · edited May 23 '17 at 12:18

1

Change your jsFiddle to "No wrap (body)" and modify your function like so...

//$(function() {
    //alert(1);
    google.load('search',1);
    alert($);

    google.setOnLoadCallback(function() {       
        alert(2);
    });
//});

Nearly the same question asked here: Google is not defined using Google Visualization API; possibly jQuery's fault

edited May 23 '17 at 12:18

Community

1
1

answered Mar 17 '12 at 08:55

Chris Gessler

22,727
7
57
83

@ChrisGessler Please add the explanation of the real reason why it didn't work to your answer. It's crucial to understand the problem, and how to debug & fix it. – Rob W Mar 17 '12 at 09:10

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

This problem is caused by document.write in Google's load API, similar to this question. The script is deferred, as seen in the picture below:

enter image description here

To solve the issue, do not wrap the code in an onload/domready handler.

<script src="http://www.google.com/jsapi?" type="text/javascript"></script>
<script>
// All load-related invocations have to be placed here.
google.load('search',1);
google.setOnLoadCallback(function() {       
    alert(2);
});
</script>

Note that JSfiddle places any content at the upperleft corner within the <body> tags. So, a simple copy-paste of the code in JSFiddle will not show the right results.

edited May 23 '17 at 10:32

Community

1
1

answered Mar 17 '12 at 08:57

Rob W

341,306
83
791
678

PS. JSfiddle, where I pasted all code in the upper-left corner: http://jsfiddle.net/dgap5/4/ – Rob W Mar 17 '12 at 09:02
@RameshVel JSFiddle is not the problem. The real problem, as explained in detail, is caused by Google's script loader, which uses `document.write`. – Rob W Mar 17 '12 at 09:06
Yeah yeah i got that.. Actually i have tested the code without jquery on-load block too.. but by default jsfiddle wraps it with a doc on load so i got the same error... (i missed it) i was referring to that... :) – RameshVel Mar 17 '12 at 09:09

score 0 · Answer 3 · edited Sep 29 '15 at 10:16

I have faced the same issues.Here's the resolution.

If you want to use google visualization api in JQuery. Please follow the below approach

<script type="text/javascript">
//Load the Google visualization library
google.load("visualization", "1.1", {packages:["bar"]});
$(document).ready(function() {
     google.setOnLoadCallback(function () {
        $('#Search').click(sendAndDraw);
     });

     $("#Search").click(function (e) {
     var data = google.visualization.arrayToDataTable([
         ['Technology', 'Beginner', 'Intermediate', 'Expert'],
         ['Java', 10, 40, 20],
         ['DOT NET', 11, 46, 25],
         ['Mainframe', 66, 11, 30],
         ['Oracle', 10, 50, 30]
       ]);


    var options = {
      chart: {
        title: 'Management Reports',
        subtitle: 'Classification of resources',
      }
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));

    chart.draw(data, options);

});

Mysterious 'object doesnt support this method'error in IE8 on google.load

3 Answers3

Linked