up vote 0 down vote favorite

I'm trying to plot some cities on Google's Geochart. This function works perfectly fine and will plot cities.

function drawMarkersMap() {
  var newInfo = google.visualization.arrayToDataTable([
   ['City'],
   ['San Diego'],
   ['Los Angeles'],
   ['San Jose']
  ]);

While that's nice and all, I'm generating my cities from my database via php. So, let's just say we have this php array

<?php $city = array("San Diego", "Los Angeles", "San Jose"); ?>

Now here comes the part where I'm struggling. I can't seem to get a loop working properly so that I can output each city separately.

When I do this only the first city in the array(San Diego) will display and I understand why...I'm just showing that this method will at least print "something"

function drawMarkersMap() {
  var newInfo = google.visualization.arrayToDataTable([
    ['City'],
    ['<?php foreach($city as $location){ echo json_encode($location); } ?>']
]);
//options here
}

So, I'm attempting to loop through and print each item in the array using javascript but I don't seem to have the logic correct

function drawMarkersMap() {
  var newInfo = google.visualization.arrayToDataTable([
    ['City'],
    for(i=0;i<json_encode($city).count;i++){
     //some kind of print statement mixing php and javascript. I need help here please!
     }
]);

Here's the entire page

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<?
$city = array("San Jose","Los Angeles","San Diego");
foreach($city as $key=>$value) {
     echo "$value";
}  
?>
<script type="text/javascript">
 google.load('visualization', '1.1', {packages: ['geochart']});


function drawMarkersMap() {
  var newInfo = google.visualization.arrayToDataTable([
    ['City'],
['<?php echo json_encode($city);  ?>']
]);

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

chart.draw(newInfo, {width: 556, height: 347, displayMode: 'markers', region: 'US-CA', resolution: 'provinces'});
}


google.setOnLoadCallback(drawMarkersMap);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="chart_div"></div>
</body>
</html>
share|improve this question
You need to post what json_encode() actually outputs, not just the function in place. Your JSON is likely malformed, or not an array, but an object, which Google's functions might vomit over. – Bojangles May 18 '12 at 1:15
I'm not quite sure I understand what you mean. Can you please give me an example or modify what I have? – user1104854 May 18 '12 at 1:18
At the moment, all you've given is <?php echo json_encode($city); ?>, which is useless because it's impossible to know if the string that json_encode() outputs is properly formed for the JS you plug it into. Instead of posting the PHP, please post the JSON string it outputs to the browser. – Bojangles May 18 '12 at 1:21
feedback

2 Answers

up vote 2 down vote accepted 
<?php $city = array(array('City'), array('San Diego'), array('Los Angeles'), array('San Jose')); ?>

var newInfo = google.visualization.arrayToDataTable(<?php echo json_encode($city); ?>);

This recreates exactly the same array structure as your original script.

share|improve this answer
Thanks, worked perfectly. I now see what @JamWaffles was talking about with my array set up improperly. – user1104854 May 18 '12 at 1:28
feedback
up vote 1 down vote

Why don't you use the implode function?

<script type="text/javascript">
<?php $city = array("San Diego", "Los Angeles", "San Jose"); ?>
    function drawMarkersMap() {
        var newInfo = google.visualization.arrayToDataTable([
        ['City'],
        ['<?php echo implode("'],\n\t\t['",$city) ?>']
        ]);
    }
</script>

which will result in

<script type="text/javascript">
    function drawMarkersMap() {
        var newInfo = google.visualization.arrayToDataTable([
        ['City'],
        ['San Diego'],
        ['Los Angeles'],
        ['San Jose']]);
    }
</script>

As per request…

<script type="text/javascript">
<?php $city = array("San Diego", "Los Angeles", "San Jose"); ?>
    function drawMarkersMap() {
        var newInfo = google.visualization.arrayToDataTable([
        ['City'],
        ['<?php foreach($city as &$c)$c=htmlspecialchars($c,ENT_QUOTES,'UTF-8'); echo implode("'],\n\t\t['",$city); ?>']
        ]);
    }
</script>

..although I should agree with the fact that using JSON is much practical :)

share|improve this answer
That works, until your values contain quotes or slashes... Let json_encode handle it. – deceze May 18 '12 at 1:56
@deceze I added an alternative to my post but I agree. – inhan May 18 '12 at 2:15
htmlspecialchars does not necessarily help when you're trying to escape JSON syntax. – deceze May 18 '12 at 2:29
I was not mentioning JSON. – inhan May 18 '12 at 2:51
Maybe not, but you are trying to cobble together valid JSON/Javascript code, which means you need to escape for JSON/Javascript syntax, not HTML. – deceze May 18 '12 at 3:20
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.