unable to display marker map using php/ajax/json

[Timothy Sheils]

I'm trying to have a map displayed on a website I am working on. I have found plenty of resources on how to use an ajax request to get json data, and convert to a google datatable, but I can't seem to get it to work correctly. Here is the important code:

client1.php contains the main page of the website. I want the chart to load here. I can do it by hardcoding values in, so the problem lies with the ajax/json side of it i think.

  <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawMarkersMap);

function drawMarkersMap() {
    $.ajax({
        url: "getData.json",
       dataType:"json",
        success: function (json) {
            // Create our data table out of JSON data loaded from server.
       var data = new google.visualization.DataTable(jsonData);
        var options = {
              region: 'US',
            displayMode: 'markers',
            colorAxis: {colors: ['green', 'blue']}
    };     
            var chart = new google.visualization.GeoChart(   document.getElementById('visualization'));
 chart.draw(data, options);
};
</script>

of course, there is a :
   <div id="visualization" style="width: 900px; height: 500px;"></div>

Next up is the getData2.php , taken right from google documentation:

<?php
$string = file_get_contents("centers2.json");
echo $string;
?>

Here is a shortened version of the json file:

{


  "cols": [
        {"id":"","label":"Center","pattern":"","type":"string"},
        {"id":"","label":"No. of Registerees","pattern":"","type":"number"}
      ],
"rows": [               
        {"c":[{"v":"1 E 161st St Bronx, NY 10451"},{"v":98765}]},
    {"c":[{"v":"123-01 Roosevelt Ave New York, NY 11368"},{"v":96543}]},
      
        {"c":[{"v":"4 Yawkey Way Boston, MA 02215"},{"v":43566}]}
    ]
}


Any suggestions? I can get this to work by hard coding data in. Is there any easy way to track where these calls are hanging? Any input is greatly appreciated. Thanks!

[asgallant]

Your javascript is missing the closing braces and parenthesis for the AJAX call and the drawMarkersMap function:

function drawMarkersMap() {

    $.ajax({

        url: "getData.json",

        dataType:"json",

        success: function (json) {

            // Create our data table out of JSON data loaded from server.

            var data = new google.visualization.DataTable(jsonData);

            var options = {

                region: 'US',

                displayMode: 'markers',

                colorAxis: {colors: ['green', 'blue']}

            };      

            var chart = new google.visualization.GeoChart(document.getElementById('visualization'));

            chart.draw(data, options);

        } // <-- the ";" that was here does not belong

    }); // <-- missing this

} // <-- and this

Try that and see if it works.

[Timothy Sheils]

That didn't help. I have been following a previous post you were working on: https://groups.google.com/forum/#!topic/google-visualization-api/CUI5M90NTvU

Should i set the ajax call to a variable:

   " $.ajax({"
or

"var ajaxData =

    $.ajax({"

            var data = new google.visualization.DataTable(ajaxData);

I'm also worried the json string might not be in the right format, i tested it, and its valid, but not going through.

[asgallant]

There is another thing you need to change.  On this line:

var data = new google.visualization.DataTable(jsonData);

change "jsonData" to "json":

var data = new google.visualization.DataTable(json);

You not not need to assign the AJAX call to a variable.

[Timothy Sheils]

Ok. got that fixed. I looked at the developer console in firefox. I'm getting an error: ReferenceError: data is not defined for the line 

chart.draw(data, options);

It feels like something isn't right with the ajax call.

--
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/8A63gZqZwQ4/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]

That sounds like a variable scope problem, and is likely due to having the chart.draw call in the wrong place.  Post the code you are using that causes the problem.

On Thursday, March 6, 2014 1:49:54 PM UTC-5, Timothy Sheils wrote:

Ok. got that fixed. I looked at the developer console in firefox. I'm getting an error: ReferenceError: data is not defined for the line 

chart.draw(data, options);

It feels like something isn't right with the ajax call.

On Thu, Mar 6, 2014 at 1:33 PM, asgallant <drew_g...@abtassoc.com> wrote:

There is another thing you need to change.  On this line:

var data = new google.visualization.DataTable(jsonData);

change "jsonData" to "json":

var data = new google.visualization.DataTable(json);

You not not need to assign the AJAX call to a variable.

On Thursday, March 6, 2014 12:12:12 PM UTC-5, Timothy Sheils wrote:

That didn't help. I have been following a previous post you were working on: https://groups.google.com/forum/#!topic/google-visualization-api/CUI5M90NTvU

Should i set the ajax call to a variable:

   " $.ajax({"
or

"var ajaxData =

    $.ajax({"

            var data = new google.visualization.DataTable(ajaxData);

I'm also worried the json string might not be in the right format, i tested it, and its valid, but not going through.

--
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/8A63gZqZwQ4/unsubscribe.

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

[Timothy Sheils]

This is the full function. The website can find up to 
        url: "getData.php",

It isn't showing any more errors. What is the easiest way to see exactly is being returned by the ajax call?

 <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawMarkersMap);


function drawMarkersMap() {
 $.ajax({

        url: "getData.php",

        dataType:"json",          

        success: function (json) {
            // Create our data table out of JSON data loaded from server.

var data = new google.visualization.arrayToDataTable(JSON.parse(json));
           // var data = new google.visualization.DataTable(json);

            var options = {
                region: 'US',
                displayMode: 'markers',
                colorAxis: {colors: ['green', 'blue']}
            };      
            var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
            chart.draw(data, options);
        } // 

<-- the ";" that was here does not belong
    }); // <-- missing this
} // <-- and this


</script> 

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

[asgallant]

Ok, here's the problem:

var data = new google.visualization.arrayToDataTable(JSON.parse(json));

First, your json is formatted as a DataTable, so you don't want to use the arrayToDataTable method.  Second, the arrayToDataTable method does not use the "new" keyword, but this isn't germaine, since you don't want to use this anyway.  Use the other line you commented out:

var data = new google.visualization.DataTable(json);

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@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.

[Timothy Sheils]

Haha I was in the middle of writing about how that still didn't work, and was copying all the code that I have. Then I realized that the getData.php file wasn't quite what I thought it was...    Needless to say, the function works perfectly. Thank you so much for your time, you are a lifesaver!