CODEWITHSUNDEEP
javascriptinternet-explorergoogle-api
RameshVel
RameshVel

Reputation: 65877

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

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?

Upvotes: 1

Views: 2309

Answers (3)

Sures Ramar
Sures Ramar

Reputation: 1

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);

});

Upvotes: 0

Rob W
Rob W

Reputation: 348992

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.

Upvotes: 1

Chris Gessler
Chris Gessler

Reputation: 23113

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

Upvotes: 1

Related Questions