Карта визуализации Google не отображается

Я пытаюсь загрузить местоположения из json in в карту Google Chart, используя широту, долготу и имя. Я создал другие Google Charts, и они работают нормально, но карта просто не сделает для меня. У меня есть ключ Google карт Google Api в html-файле, а также вызывается здесь javascript и php-файлы. Я смотрел на это уже несколько дней, но, похоже, не видел, как он провалился, могут ли новые глаза увидеть, что происходит не так? Заранее спасибо.Карта визуализации Google не отображается

Файл php вытаскивает запрос из базы данных и отправляет его в json;

<?php 

include '..\..\include\demo_conn.php'; 


    $conn = new PDO($DB_HOST, $DB_USER, $DB_PASS); 

    $result = $conn->prepare('SELECT lat as "Lat", 
           lon as "Long", 
           name as "Name" 
           FROM locations'); 

    $result->execute(); 

$rows = array(); 
    $table = array(); 
    $table['cols'] = array(

    // Labels for your chart, these represent the column titles. 


    array('label' => 'Lat', 'type' => 'number'), 
    array('label' => 'Long', 'type' => 'number'), 
    array('label' => 'Name', 'type' => 'string') 

); 
    /* Extract the information from $result */ 
    foreach($result as $r) { 

     $temp = array(); 

     // Trailer codes 

     $temp[] = array('v' => (float) $r['Lat']); 

     // Values of the each location 

     $temp[] = array('v' => (float) $r['Long']); 
     $temp[] = array('v' => (string) $r['Name']); 
     $rows[] = array('c' => $temp); 
    } 

$table['rows'] = $rows; 

//write to json file 
    $fp = fopen('demo_02.json', 'w'); 
    fwrite($fp, json_encode($table)); 
    fclose($fp); 

?>

Это результирующий json;

{"cols":[{"label":"Lat","type":"number"},{"label":"Long","type":"number"},{"label":"Name","type":"string"}],"rows":[{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR6"}]},{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR4"}]},{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR2"}]},{"c":[{"v":52.64901},{"v":-8.57918},{"v":"EUR2"}]},{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR3"}]}]}

Это файл javascript для карты Google карт;

// Load the Visualization API and the map package. 
    google.load('visualization', {'packages': ['map'] }); 
    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 


function drawChart() { 

     // Create our data table out of JSON data loaded from server. 
     var jsonData = $.ajax({ 
      url: "demo_02.json", 
      dataType: "json", 
      async: false 
      }).responseText; 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.arrayToDataTable(jsonData); 
     var options = { 
      //title: 'Location', 
      showTooltip: true, 
      showInfoWindow: true, 
      enableScrollWheel: true, 
      mapType: 'normal' 
     }; 
     // Instantiate and draw our chart, passing in some options. 
     // Do not forget to check your div ID 
     var map = new google.visualization.Map(document.getElementById('demo_02_div')); 
     map.draw(data, options); 
    }

И это html для целей тестирования;

<html> 
    <head> 

    <!--Load for maps--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=*************************************************&callback=initMap" 
    type="text/javascript"></script> 

    <!--PHP--> 
    <script type="text/javascript">$.ajax({url: "demo_02.php"})</script> 

    <!--Javascript--> 
    <script type="text/javascript" src="demo_02.js"></script> 


    </head> 

    <body> 

    <div id="demo_02_div"> 
    </div> 

    </body> 
</html>

Любая помощь очень ценится.

источник

2017-02-09 crkmkhea

первой: рекомендуется использовать loader.js для загрузки библиотеки, по сравнению с jsapi

по release notes ...

Версия Google Charts, которые по-прежнему доступны через JSAPI погрузчике нет более продолжительное обновление постоянно. С этого момента вы можете использовать новый gstatic loader.

это будет только изменить load заявления ...

google.charts.load('current', { 
    callback: drawChart, 
    packages: ['map'] 
});

следующего: arrayToDataTable является статическим методом (не нужно new ключевого слова)

однако этот метод используется для загрузки базового массива данные

загрузить JSON данных, просто создать DataTable непосредственно

var data = new google.visualization.DataTable

см следующий рабочий фрагмент кода ...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['map'] 
 
}); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable({"cols":[{"label":"Lat","type":"number"},{"label":"Long","type":"number"},{"label":"Name","type":"string"}],"rows":[{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR6"}]},{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR4"}]},{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR2"}]},{"c":[{"v":52.64901},{"v":-8.57918},{"v":"EUR2"}]},{"c":[{"v":52.24655},{"v":-6.34384},{"v":"EUR3"}]}]}); 
 
    var options = { 
 
    showTooltip: true, 
 
    showInfoWindow: true, 
 
    enableScrollWheel: true, 
 
    mapType: 'normal' 
 
    }; 
 
    var map = new google.visualization.Map(document.getElementById('demo_02_div')); 
 
    map.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="demo_02_div"></div>

источник

2017-02-10 02:56:09 WhiteHat

Спасибо, WhiteHat! Это действительно помогло мне, ваш ответ помог мне лучше понять методы, и теперь я буду лучше использовать поддержку Google Charts. В очередной раз благодарим за помощь. – crkmkhea

Самуэль Лив, Феликс Ганьон-Гренье, Ашиш Нитин Патил, Адитья Вьяс-Лакхан, Эдхум.Я думал, что в своем вопросе я был ясен, но оглядываясь назад, я мог бы сформулировать это лучше. Урок, извлеченный для будущего, спасибо. – crkmkhea

ура! рад помочь... – WhiteHat

Карта визуализации Google не отображается

ответ

Смежные вопросы