Data table and scatter graph are not displayed when I'm including google maps api - Uncaught TypeError: Object #<Object> has no method 'load'

[Stelios Voskos]

I have implemented part of the functionality f my dashboard in different files and now I'm trying to merge them all together. My dashboard is getting an address from a geocoding field and retrieves url json data from a website. Then the data are visualized on the map,on a data table and on a scatter chart. Now I'm trying to merge the google map with the data table, but it's been a couple of hours that I'm getting the following error: Uncaught TypeError: Object #<Object> has no method 'load' I'm trying to change the order that the libraries are loaded, but I didn't see any result. Also, the data table and scatter graph are not displayed The problem arises when I include both APIs(Map and visualization). Here is part of my code. If you need more code, please find attatched the 2 documents that I'm enclosing to you. Thank you. 

Javascript:

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <!-- jQuery CDN -->
<script type="text/javascript">
google.load('visualization', '1', {'packages':['table']});
google.setOnLoadCallBack(drawTable);
    var geocoder;
    var map;
    var latlng;
    var markers = [];
    var myPositionMarker = null;;
//Initializing the map
function initialize() {
var lat = 52.629729;
var lng = -1.131592;
geocoder = new google.maps.Geocoder();
latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
    zoom: 8,
    center: latlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
getCrimeByLocation(lat, lng);
 }
 function geocodeCrimeLocation(date){
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
if(date == null){
    var d = new Date();
    date = d.getFullYear() + '-' + (d.getMonth()+1);
    //hardcoding as of now as jan 2014 data is not there, remove when req
    date = "2013-01";
}
$.getJSON( "http://data.police.uk/api/crimes-street/all-crime?lat="+latitude+"&lng="+longitude+"&date="+date, function(data) {
    while(markers.length > 0){
        markers.pop().setMap(null);
    }

    //marking the requested position
    addMyPositionMarker(latitude, longitude);

    $.each( data, function( key, val ) {
        //var myLatlng = new google.maps.LatLng(val.location.latitude, val.location.longitude);
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(val.location.latitude, val.location.longitude),
            map: map,
            animation: google.maps.Animation.DROP,
            draggable: false,
            title: val.location.street.name
        });
        markers.push(marker); // saving markers for reference, so that we can remove them later
    });

    if(markers.length > 0){
        fitBoundsMap();
    }       
});

} else {
  alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function drawTable(){
var jsonData = $.ajax({
            url: "getJSONData.php",
            dataType:"json",
            async: false
        }).responseText;
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string','category');
        dataTable.addColumn('string','context');
        dataTable.addColumn('number','id');
        dataTable.addColumn('string','location_subtype');
        dataTable.addColumn('string','location_type');
        dataTable.addColumn('string','month');
        dataTable.addColumn('string','persistent_id');
        dataTable.addColumn('string','street name');
        var json=JSON.parse(jsonData);
        for (var i=0; i<json.length; i++) {
            delete json[i].outcome_status;
            var row = [];       
            row.push(json[i].category);
            row.push(json[i].context);
            row.push(json[i].id);
            row.push(json[i].location_subtype);
            row.push(json[i].location_type);
            row.push(json[i].month);
            row.push(json[i].persistent_id);
            row.push(json[i].location.street.name);
            dataTable.addRow(row);
        }
        var chart = new google.visualization.Table(document.getElementById('table_div'));
        chart.draw(dataTable, {width: 1000, height: 300});
}

HTML:

<body onload="initialize()">
<!-- <div id="map-canvas" style="width: 320px; height: 480px;"></div> -->
<div id="map-canvas" style="width: 100%; height: 480px;"></div>
<div>
    <input id="address" type="textbox" placeholder = "Enter address, or postcode">
    <input type="button" value="Encode" onclick="geocodeCrimeLocation()">
</div>
<br>
<div id = "pieChart_div">
</div>
<br>
<div id = "table_div">
</div>
</body>

PHP:

<?php
$json = file_get_contents('http://data.police.uk/api/crimes-street/all-crime?lat=$_GET['latitude']&lng=$_GET['longitude']&date=2013-01'); 
$json = str_replace("\xe2\x80\xa8", '\\u2028', $json);
$json = str_replace("\xe2\x80\xa9", '\\u2029', $json);
echo $json;
?>

[asgallant]

I saw this posted on StackOverflow (http://stackoverflow.com/questions/21478450/google-visualization-data-table-is-not-visualized) - did that resolve your problem?

[Stelios Voskos]

Yeah the error went away, thanks. The problem is that I need to visualize a table and a scatter graph for the geocoded address. I know how to implement them(see testGraph.html), but I can't draw my table and graph inside the geocodeCrimeLocation in ThreeComponent.html, as it will be called twice and it will throw an error. Do you have any ideas how to fix this issue? Thanks

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/ZQwYzI_kfXA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

[asgallant]

You mean calling google.load twice?  The solution is to load both packages at the same time:

google.load('visualization', '1', {'packages':['table', 'corechart']});

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.