title: php generated array in javascript function
body: <p>I'm trying to plot some cities on Google's Geochart. This function works perfectly fine and will plot cities.</p>
  
  <pre><code>function drawMarkersMap() {
    var newInfo = google.visualization.arrayToDataTable([
     ['City'],
     ['San Diego'],
     ['Los Angeles'],
     ['San Jose']
    ]);
  </code></pre>
  
  <p>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</p>
  
  <pre><code>&lt;?php $city = array("San Diego", "Los Angeles", "San Jose"); ?&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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"</p>
  
  <pre><code>function drawMarkersMap() {
    var newInfo = google.visualization.arrayToDataTable([
      ['City'],
      ['&lt;?php foreach($city as $location){ echo json_encode($location); } ?&gt;']
  ]);
  //options here
  }
  </code></pre>
  
  <p>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</p>
  
  <pre><code>function drawMarkersMap() {
    var newInfo = google.visualization.arrayToDataTable([
      ['City'],
      for(i=0;i&lt;json_encode($city).count;i++){
       //some kind of print statement mixing php and javascript. I need help here please!
       }
  ]);
  </code></pre>
  
  <p>Here's the entire page</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Google Visualization API Sample&lt;/title&gt;
  &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
  
  &lt;?
  $city = array("San Jose","Los Angeles","San Diego");
  foreach($city as $key=&gt;$value) {
       echo "$value";
  }  
  ?&gt;
  &lt;script type="text/javascript"&gt;
   google.load('visualization', '1.1', {packages: ['geochart']});
  
  
  function drawMarkersMap() {
    var newInfo = google.visualization.arrayToDataTable([
      ['City'],
  ['&lt;?php echo json_encode($city);  ?&gt;']
  ]);
  
  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);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="font-family: Arial;border: 0 none;"&gt;
  &lt;div id="chart_div"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>