Проблема с отображением географических точек на карте с графиком Google - PullRequest
0 голосов
/ 03 апреля 2020

Я пытаюсь отображать некоторые географические данные в виде точек (точек) на глобальной карте. Когда я запускаю код - в браузере - отображаются статистические результаты в виде текста, глобальная карта, но на них они не отображаются. должен отметить, что основной код был взят из кода, который реализует круговую диаграмму. В следующих строках я представляю код:

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>plus2net.com : Pie chart using data from MySQL table</title>
</head>
<body >
<?Php
//
require "connection.php";// Database connection
if($stmt = $link->query("SELECT Nationality_Name,Count FROM nationality_arrivals")){
  echo "No of records : ".$stmt->num_rows."<br>";
$php_data_array = Array(); // create PHP array
  echo "<table>
<tr> <th>Nationality_Name</th><th>Count</th></tr>";
while ($row = $stmt->fetch_row()) {
   echo "<tr><td>$row[0]</td><td>$row[1]</td></tr>";
   $php_data_array[] = $row; // Adding to array
   }
echo "</table>";
}else{
echo $link->error;
}
//print_r( $php_data_array);
// You can display the json_encode output here. 
echo json_encode($php_data_array); 
// Transfor PHP array to JavaScript two dimensional array 
echo "<script>
        var my_2d = ".json_encode($php_data_array)."
</script>";
?>
<div id="chart_div"></div>
<br><br>
<a href=https://www.plus2net.com/php_tutorial/chart-database.php>Pie Chart from MySQL database</a>
</body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
<div id="chart_div"></div>
<br><br>
<a href=https://www.plus2net.com/php_tutorial/chart-database.php>Pie Chart from MySQL database</a>
</body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
 google.charts.load('current', {
       'packages': ['geochart'],
       // Note: you will need to get a mapsApiKey for your project.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
     });
      google.charts.setOnLoadCallback(drawMarkersMap);
      function drawMarkersMap() {
   var data = google.visualization.arrayToDataTable([
        ['Nationality_Name','string'],['Count','number']
     ]);        
var options = {title:'plus2net.com : How the tutorials are distributed',
         width:600,height:500};
        // Instantiate and draw the chart
      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
</script>
      }
</script>

</html>

...