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


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

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

Title: Geocoding service

<<attachment: getData.php>>

<<< text/html; charset=US-ASCII; name=testGraph.html: Unrecognized >>>

<<< text/html; charset=US-ASCII; name=ThreeComponent.html: Unrecognized >>>

Reply via email to