Issue in populating Google GeoChart Map from a PHP array in Javascript

Question

I have a PHP array of country names -

<?php 
$countries_array = array("Russia", "Australia", "Chile");
?>

I need to show these countries on map via the Google Geochart map in Javascript and using this code -

function drawRegionsMap() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Country');

<?php 
    foreach ($countries_array as $cty) {
        echo "data.addRow(['Country', " . $cty . "]);";
    }
?>

    var options = {backgroundColor: '#E7F2F4'};

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

    chart.draw(data, options);
    }

I guess I'm passing the countries array in a wrong way, because the map doesn't show these countries. How can I correct it ?

Answer 1

Note PHP serves $countries_array so you need to be within PHP script tags to output the array. It is probably easier to add each data using addRow(), it makes the syntax simpler.

function drawRegionsMap() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Country');

<?php 
    foreach ($countries_array as $cty) {
        print "data.addRow(['" . $cty . "']);" . PHP_EOL;
    }
?>

  var options = {backgroundColor: '#cccccc'};
  var chart = new   google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}