Добавление данных из mongodb в Google GeoChart API - PullRequest
0 голосов
/ 10 октября 2019

Я очень новичок в разработке, только что закончил сетевой загрузочный лагерь на Udemy и создал несколько простых веб-сайтов, приложение типа yelp и несколько других незначительных проектов кодирования.

В настоящее время я работаю над "«Карта путешествий», которая позволит пользователям добавлять страны, которые они посетили, и отображает карту, на которой выделены страны, в которых они были.

Я работаю с node.js mongodb и mongoose.

После некоторых исследований я решил использовать геокарту API карт Google (визуализация).

Карта хорошо отображается на странице, и любая добавленная страна выделяется, как и ожидалось.

Я пытаюсь выяснить, как взять данные из mongodb и заполнить «var data». Это должно быть динамическим, поскольку данные будут отличаться в зависимости от пользователя, который вошел в систему.

В настоящее время у меня есть следующий код в моем header.ejs внутри, чтобы связать API и мой файл javascript внешнего интерфейса. :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="/javascript/script.js"></script>

Только одна строка в моем файле index.ejs:

<div id="regions_div" style="width: 900px; height: 500px;"></div>

И следующее в моем файле script.js:

google.charts.load('current', {
        'packages':['geochart'],
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
            ['Country'],
            //the data has to go here   
        ]);


        var options = {};

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

        chart.draw(data, options);
      }
...