javascript - Cannot read property 'DataTable' of undefined - Stack Overflow

admin管理员组

文章数量:1333614

The following function throws an error when called in document ready with jQuery:

searchCity:function(){

    var map = this.map,
        markers = [],
        input = document.getElementById('pac-input'),
        dataTable;

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    var searchBox = new google.maps.places.SearchBox(input);

    google.maps.event.addListener(searchBox, 'places_changed', function() {

        var places = searchBox.getPlaces(),
            apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            url = '/',
            lati = places[0].geometry.location.B,
            longi = places[0].geometry.location.k,
            data,
            city = $('.city'),
            summary = $('.summary');

            console.log(places);

        $.getJSON(url + apiKey + "/" + lati + "," + longi + "?callback=?", function(data) {


            console.log(data);

            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn('string', 'hours');
            dataTable.addColumn('number', 'temperature');

            for(var i=0; i<data.daily.data.length; i++){

                  // dataTable.addColumn({type: 'string', role: 'annotation'});
                  dataTable.addRows([
                    ['0'+i,  data.daily.data[i].temperatureMax]
                  ]);
            }

          // Load the Visualization API and the piechart package.
          // google.load('visualization', '1.0', {'packages':['corechart'], callback: weatherAPP.generateGraph});
            var options = { tooltip: {isHtml: true}};
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(dataTable, options);

            city.html('');

            setTimeout( function(){ 
                weatherAPP.slideToCloseSearch();
            }, 500 );

            city.html('').html(places[0].formatted_address);
            summary.html('').html(data.daily.summary);

            if(data.currently.icon = 'clear-day'){
                $('.iconHolder').addClass('icon-sun');
            }
            else if(data.currently.icon = 'rain'){
                $('iconHolder').addClass('icon-rainy');
            }

            $('.temperature').html(data.currently.temperature+ ' <span>F</span>');

            weatherAPP.generateRainVisualEffect();

        });

        if (places.length == 0) {
            return;
        }
        for (var i = 0, marker; marker = markers[i]; i++) {
            marker.setMap(null);
        }

        // For each place, get the icon, place name, and location.
        var bounds = new google.maps.LatLngBounds();

        for (var i = 0, place; place = places[i]; i++) {
            var image = {
                url: 'pin.png'
            };

            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                title: place.name,
                position: place.geometry.location
            });

            markers.push(marker);

            bounds.extend(place.geometry.location);
        }

        map.fitBounds(bounds);

    }); // places_changed

    // Bias the SearchBox results towards places that are within the bounds of the
    // current map's viewport.
    google.maps.event.addListener(map, 'bounds_changed', function() {
        map.setZoom(6);
        var bounds = map.getBounds();
        searchBox.setBounds(bounds);
    });

},

$(document).ready(function(){

     weatherAPP.displayTime();

    weatherAPP.generateMap();

    $('.boom').on('click', function(){

        if(mainWrapper.hasClass(animateLeft)){
            weatherAPP.slideToCloseSearch();
        }else{
            weatherAPP.slideToSearch();
        }

    });

    weatherAPP.searchCity();

});

ERROR: Cannot read property 'DataTable' of undefined

The following function throws an error when called in document ready with jQuery:

searchCity:function(){

    var map = this.map,
        markers = [],
        input = document.getElementById('pac-input'),
        dataTable;

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    var searchBox = new google.maps.places.SearchBox(input);

    google.maps.event.addListener(searchBox, 'places_changed', function() {

        var places = searchBox.getPlaces(),
            apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            url = 'https://api.forecast.io/forecast/',
            lati = places[0].geometry.location.B,
            longi = places[0].geometry.location.k,
            data,
            city = $('.city'),
            summary = $('.summary');

            console.log(places);

        $.getJSON(url + apiKey + "/" + lati + "," + longi + "?callback=?", function(data) {


            console.log(data);

            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn('string', 'hours');
            dataTable.addColumn('number', 'temperature');

            for(var i=0; i<data.daily.data.length; i++){

                  // dataTable.addColumn({type: 'string', role: 'annotation'});
                  dataTable.addRows([
                    ['0'+i,  data.daily.data[i].temperatureMax]
                  ]);
            }

          // Load the Visualization API and the piechart package.
          // google.load('visualization', '1.0', {'packages':['corechart'], callback: weatherAPP.generateGraph});
            var options = { tooltip: {isHtml: true}};
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(dataTable, options);

            city.html('');

            setTimeout( function(){ 
                weatherAPP.slideToCloseSearch();
            }, 500 );

            city.html('').html(places[0].formatted_address);
            summary.html('').html(data.daily.summary);

            if(data.currently.icon = 'clear-day'){
                $('.iconHolder').addClass('icon-sun');
            }
            else if(data.currently.icon = 'rain'){
                $('iconHolder').addClass('icon-rainy');
            }

            $('.temperature').html(data.currently.temperature+ ' <span>F</span>');

            weatherAPP.generateRainVisualEffect();

        });

        if (places.length == 0) {
            return;
        }
        for (var i = 0, marker; marker = markers[i]; i++) {
            marker.setMap(null);
        }

        // For each place, get the icon, place name, and location.
        var bounds = new google.maps.LatLngBounds();

        for (var i = 0, place; place = places[i]; i++) {
            var image = {
                url: 'pin.png'
            };

            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                title: place.name,
                position: place.geometry.location
            });

            markers.push(marker);

            bounds.extend(place.geometry.location);
        }

        map.fitBounds(bounds);

    }); // places_changed

    // Bias the SearchBox results towards places that are within the bounds of the
    // current map's viewport.
    google.maps.event.addListener(map, 'bounds_changed', function() {
        map.setZoom(6);
        var bounds = map.getBounds();
        searchBox.setBounds(bounds);
    });

},

$(document).ready(function(){

     weatherAPP.displayTime();

    weatherAPP.generateMap();

    $('.boom').on('click', function(){

        if(mainWrapper.hasClass(animateLeft)){
            weatherAPP.slideToCloseSearch();
        }else{
            weatherAPP.slideToSearch();
        }

    });

    weatherAPP.searchCity();

});

ERROR: Cannot read property 'DataTable' of undefined

• javascript

Share Improve this question Follow asked Oct 29, 2014 at 16:21 AessandroAessandro 5,7712121 gold badges7272 silver badges146146 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The error itself is quite self-explanatory. You cannot obtain a property of an undefined object. So, it's telling you that in this line:

var dataTable = new google.visualization.DataTable();

Either google or google.visualization is undefined

Not seeing the rest of your code, I can only guess as to what is causing the problem, but my assumption would be that either the Google Visualization API isn't loaded. Another possibility is that google or google.visualization aren't available in the global namespace for some reason. These would be the two places I would start.

I see that you have a mented section in your code that looks like its intent would be to load the Google Visualization API? https://developers.google./loader/

// Load the Visualization API and the piechart package.
// google.load('visualization', '1.0', {'packages':['corechart'], callback: weatherAPP.generateGraph});

If that's the call that's supposed to load the API, then unment it and move it above your DataTable definition.

If you still can't figure out what's causing the problem, please post more code so I can look at it in greater detail.

Google chart on Angular 9

I had a similar error, my problem was how I did call drawChart method on setOnLoadCallback.

google.charts.load('current', {'packages':['line']});  
//this was incorrect
//google.charts.setOnLoadCallback(this.drawChart());
google.charts.setOnLoadCallback(this.drawChart.bind(this));

This error occurs due to following,

1. Google Visualization library is not loaded
2. By just naming the callback function (e.g. just drawChart), you are passing in a reference to that function.

So if you want to pass parameters to your drawChart function, you need to wrap that call in another function declaration, like this:

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback( function() { drawChart(params) });

本文标签： javascriptCannot read property 39DataTable39 of undefinedStack Overflow